๐Ÿ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Syaku Modal is a small, simple jQuery plugin that makes it easy to display flexible, clean, fully customizable modal dialog boxes on your web page.

Modal

Documentation

jmodal

jmodal ์€ jQuery Modal ์ด๋ฉฐ, jQuery ํ”Œ๋Ÿฌ๊ทธ์ธ ์ž…๋‹ˆ๋‹ค.

Github: https://github.com/syakuis/jmodal
๋ฐ๋ชจ: http://syakuis.github.io/demo/jmodal/demo.html

์ง€์›

์•„์ฃผ ์‹ฌํ”Œํ•œ ๋ชจ๋‹ฌ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋‹ฌ์„ ์—ด๊ณ  ๋‹ซ๋Š” method ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๊ฐœ์˜ ๋ชจ๋‹ฌ์„ ์ˆœ์ฐจ์ ์œผ๋กœ ์—ด๊ณ  ๋‹ซ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ™•์žฅ์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ ๊ฐœ๋ฐœ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์„ค์น˜

bower install syaku-jmodal 
<link href="./dist/jquery.syaku.modal.min.css" rel="stylesheet"> <script src="./dist/jquery.syaku.modal.min.js" /></script>

์‹คํ–‰

var modal = $('<div>๋ชจ๋‹ฌ</div>').jmodal();

์—ด๊ธฐ์™€ ๋‹ซ๊ธฐ

modal.open();  modal.close();

๊ธฐ๋ณธ ์˜ต์…˜

	'auto': false, // ์ž๋™ ํ™œ์„ฑํ™”. 	'padding': '15px', // ๋ชจ๋‹ฌ ์—ฌ๋ฐฑ null = ์‚ฌ์šฉํ•˜์ง€ ์•Š์Œ 	'radius': '8px', // ๋ชจ๋‹ฌ ํ…Œ๋‘๋ฆฌ ๋ผ์šด๋“œ null = ์‚ฌ์šฉํ•˜์ง€ ์•Š์Œ 	'remove': false, // ์ง์ ‘ ์ƒ์„ฑํ•œ ๋Œ€์ƒ์ด ๋งค๋ฒˆ ์ƒˆ๋กœ ์ƒ์„ฑ๋ ๋•Œ ์ œ๊ฑฐํ•˜๊ธฐ ์œ„ํ•จ. 	'single': null, // ๊ทธ๋ฃน์œผ๋กœ ๋ฌถ์–ด ํ•ด๋‹น ๋ชจ๋‹ฌ์„ ์˜ค์ง 1๊ฐœ๋งŒ ์ƒ์„ฑ๋˜๊ฒŒ ํ•จ. 	'esc': true, // esc ๋‹ซ๊ธฐ ์‚ฌ์šฉ์—ฌ๋ถ€ 	'focus': null, // ์—ด๋ฆด๋•Œ ํฌ์ปค์Šค ํ™œ์„ฑํ™” 	'backgroundColor': '#000', // ๋ฐฐ๊ฒฝ์ƒ‰ 	'buttonClose': false, // ๋‹ซ๊ธฐ ๋ฒ„ํŠผ ์‚ฌ์šฉ์—ฌ๋ถ€ 	'opacity': 0.75, // ๋ฐฐ๊ฒฝ ํˆฌ๋ช…๋„ 	'zIndex': 1030, // ๋ชจ๋‹ฌ ๋ ˆ์ด์–ด๋ฒˆํ˜ธ (๋ถ€ํŠธ์ŠคํŠธ๋žฉ 1030, ์…€๋ ‰ํŠธ2: 1050) 	'beforeOpen': null, // ์—ด๊ธฐ ์ „ ์ด๋ฒคํŠธ 	'afterOpen': null, // ์—ด๊ธฐ ํ›„ ์ด๋ฒคํŠธ 	'beforeClose': null, // ๋‹ซ๊ธฐ ์ „ ์ด๋ฒคํŠธ 	'afterClose': null, // ๋‹ซ๊ธฐ ํ›„ ์ด๋ฒคํŠธ 	'css': null, // ์ง์ ‘ ํด๋ž˜์Šค ์ถ”๊ฐ€. 	'width': null, // ๋ชจ๋‹ฌ ๊ณ ์ •๋œ ํฌ๊ธฐ 	'height': null // ๋ชจ๋‹ฌ ๊ณ ์ •๋œ ํฌ๊ธฐ

You May Also Like