[[Programing]] > easyModal.js #title("easyModal.js¤Î»È¤¤Êý - ¤Û¤É¤è¤¤µ¡Ç½¤Î¥â¡¼¥À¥ë¥é¥¤¥Ö¥é¥ê") Javascript/jQuery¤Î¥â¡¼¥À¥ë¥¦¥£¥ó¥É¥¦Íѥ饤¥Ö¥é¥ê¤òõ¤·¤Æ¤¤¤¿¤é¡¢easyModal.js¤¬¼ê¤´¤í¤Ê´¶¤¸¤À¤Ã¤¿¤Î¤Ç¡¢¤½¤Î¥á¥â¡£ - leanModal.js¤Ë¥¤¥ó¥¹¥Ñ¥¤¥¢ - ¤â¤¦¾¯¤·µ¡Ç½¤¬¤½¤í¤Ã¤Æ¤¤¤ë - CSS¤È¤«image¥Õ¥¡¥¤¥ë¤È¤«ÉÔÍ× - jQuery¥×¥é¥°¥¤¥ó(1.8.0 °Ê¹ß) - MIT¥é¥¤¥»¥ó¥¹ * ¥À¥¦¥ó¥í¡¼¥É [#i6f93ec9] - ËܲÈ/¥Þ¥Ë¥å¥¢¥ë http://flaviusmatis.github.io/easyModal.js/ - Github http://flaviusmatis.github.io/easyModal.js/ * ÀßÃÖÊýË¡ [#i1ab0190] * ¥ª¥×¥·¥ç¥ó [#uf46c8be] ¤½¤³¤½¤³¥ª¥×¥·¥ç¥ó¤¬½¼¼Â¤·¤Æ¤¤¤Þ¤¹¡£ ** ¥ª¥×¥·¥ç¥ó¤Î»ØÄê [#xa15f341] ¤³¤ó¤Ê´¶¤¸¤Ç¡¢¥ª¥×¥·¥ç¥ó¤ò»ØÄꤹ¤ë $(function() { $(selector).easyModal({ top: 100, autoOpen: true, overlayOpacity: 0.3, overlayColor: "#333", overlayClose: false, closeOnEscape: false }); }); ** ¥ª¥×¥·¥ç¥ó¤Î¼ïÎà [#z3e3935e] ¤³¤ó¤Ê¥ª¥×¥·¥ç¥ó¤¬¤¢¤ê¤Þ¤¹¡£ - top - Sets the top offset of your modal window, accepts any integer value. -- ¥Ç¥Õ¥©¥ë¥È "auto" - autoOpen - If set true, the modal will be opened immediately after initialization. -- ¥Ç¥Õ¥©¥ë¥È false - overlayOpacity - Sets the overlay opacity. -- ¥Ç¥Õ¥©¥ë¥È 0.5 - overlayColor - Sets the color of the overlay. -- ¥Ç¥Õ¥©¥ë¥È "#000" - overlayClose - If set false, the modal will not be closed when the overlay is clicked. -- ¥Ç¥Õ¥©¥ë¥È true - overlayParent - Sets a custom parent for your modal. -- ¥Ç¥Õ¥©¥ë¥È "body" - closeOnEscape - If set false, the modal will not be closed when the escape key is pressed. -- ¥Ç¥Õ¥©¥ë¥È true - closeButtonClass - The class of your close buttons included in the modal. -- ¥Ç¥Õ¥©¥ë¥È ".close" - onOpen - Callback function called when the modal is opened. -- °ú¿ô the modal window $(function() { $(selector).easyModal({ overlayClose: false, onOpen: function(myModal){ $(myModal).append('Opened!'); } }); }); - onClose - Callback function called when the modal is closed. -- °ú¿ô: the modal window $(function() { $(selector).easyModal({ overlay : 0.4, onClose: function(myModal){ $(myModal).append('Closed!'); } }); }); - zIndex - Function called for calculating the modal z-index. -- ¥Ç¥Õ¥©¥ë¥È The default function returns the highest z-index for any element in the page + 1. - updateZIndexOnOpen - Wheter the z-index should be calculted, using the zIndex function, before the modal opens. When set to false, the z-index is calculated and set once on initialization. -- ¥Ç¥Õ¥©¥ë¥È true - hasVariableWidth - If you're planning to use a modal with variable width (e.g. 60%), set this to true in order to get it correctly centered at all times. -- ¥Ç¥Õ¥©¥ë¥È false