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 // ๋ชจ๋ฌ ๊ณ ์ ๋ ํฌ๊ธฐ