[[Programing]] > easyModal.js #title("easyModal.js¤Î»È¤¤Êý - ¤Û¤É¤è¤¤µ¡Ç½¤Î¥â¡¼¥À¥ë¥é¥¤¥Ö¥é¥ê") Javascript/jQuery¤Î¥â¡¼¥À¥ë¥¦¥£¥ó¥É¥¦Íѥ饤¥Ö¥é¥ê¤òõ¤·¤Æ¤¤¤¿¤é¡¢easyModal.js¤¬¼ê¤´¤í¤Ê´¶¤¸¤À¤Ã¤¿¤Î¤Ç¡¢¤½¤Î¥á¥â¡£ °Ê²¼¡¢½ñ¤¤«¤±¡£ #contents * ÆÃħ [#de95c6ee] - leanModal.js¤Ë¥¤¥ó¥¹¥Ñ¥¤¥¢¡£·ÚÎ̤«¤Ä¥·¥ó¥×¥ë¡£ - ¤À¤±¤É¡¢¤½¤³¤½¤³µ¡Ç½¤¬¤½¤í¤Ã¤Æ¤¤¤ë - CSS¤È¤«image¥Õ¥¡¥¤¥ë¤È¤«ÉÔÍ× - jQuery¥×¥é¥°¥¤¥ó(1.8.0 °Ê¹ß) - MIT¥é¥¤¥»¥ó¥¹ * ¥Ç¥â [#d5c0f91a] * ¥À¥¦¥ó¥í¡¼¥É [#i6f93ec9] - ËܲÈ/¥Þ¥Ë¥å¥¢¥ë http://flaviusmatis.github.io/easyModal.js/ - Github http://flaviusmatis.github.io/easyModal.js/ * ÀßÃÖÊýË¡ [#i1ab0190] ** Javascript¤òÀßÃÖ¤¹¤ë [#lcc24d74] <script type="text/javascript" src="path_to/jquery.js"></script> <script type="text/javascript" src="path_to/jquery.easyModal.js"></script> ** ¥À¥¤¥¢¥í¥°¤Î¤Ò¤Ê·Á [#n7ed985e] css¤ÇÈóɽ¼¨¤Ë¤·¤Æ¤ª¤¯ ** ¥À¥¤¥¢¥í¥°¤Î¸Æ¤Ó½Ð¤·¥Ü¥¿¥ó [#l22cd31f] ** ¥À¥¤¥¢¥í¥°¤Î¸Æ¤Ó½Ð¤·¥³¡¼¥É [#v3ef604a] $(function() { $(selector).easyModal(); }); * ¥ª¥×¥·¥ç¥ó [#uf46c8be] ¤½¤³¤½¤³¥ª¥×¥·¥ç¥ó¤¬½¼¼Â¤·¤Æ¤¤¤Þ¤¹¡£ ** ¥ª¥×¥·¥ç¥ó¤Î»ØÄê [#xa15f341] ¤³¤ó¤Ê´¶¤¸¤Ç¡¢¥ª¥×¥·¥ç¥ó¤ò»ØÄꤹ¤ë $(function() { $(selector).easyModal({ top: 100, autoOpen: true, overlayOpacity: 0.3, overlayColor: "#333", overlayClose: false, closeOnEscape: false }); }); ** ¥ª¥×¥·¥ç¥ó¤Î¼ïÎà [#z3e3935e] ¤³¤ó¤Ê¥ª¥×¥·¥ç¥ó¤¬¤¢¤ê¤Þ¤¹¡£ - top -- ¥â¡¼¥À¥ë¥¦¥£¥ó¥É¥¦¤Î¥È¥Ã¥×¤Î¥ª¥Õ¥»¥Ã¥È¤ò»ØÄê¡£À°¿ô -- ¥Ç¥Õ¥©¥ë¥È "auto" - autoOpen -- true ¤Ë¤¹¤ë¤È¡¢½é´ü²½¤Î¤¢¤È¥â¡¼¥À¥ë¤ò¼«Æ°¤Ç¥ª¡¼¥×¥ó -- ¥Ç¥Õ¥©¥ë¥È false - overlayOpacity -- ÇØ·Ê(¥ª¡¼¥Ð¡¼¥ì¥¤)¤ÎÉÔÆ©ÌÀÅÙ¤òÀßÄê -- ¥Ç¥Õ¥©¥ë¥È 0.5 - overlayColor -- ÇØ·Ê(¥ª¡¼¥Ð¡¼¥ì¥¤)¤Î¿§¤òÀßÄê -- ¥Ç¥Õ¥©¥ë¥È "#000" - overlayClose -- false¤Ë¤¹¤ë¤È¡¢ÇØ·Ê(¥ª¡¼¥Ð¡¼¥ì¥¤)¤Î¥¯¥ê¥Ã¥¯¤Ç¡¢¥â¡¼¥À¥ë¤òÊĤ¸¤ë -- ¥Ç¥Õ¥©¥ë¥È true - overlayParent -- ¥«¥¹¥¿¥à¥Ú¥¢¥ì¥ó¥È¤ò¥»¥Ã¥È¤¹¤ë -- ¥Ç¥Õ¥©¥ë¥È "body" - closeOnEscape -- false¤Ë¤¹¤ë¤È¡¢ESC¥¡¼¤ò²¡¤¹¤È¡¢¥â¡¼¥À¥ë¤òÊĤ¸¤ë -- ¥Ç¥Õ¥©¥ë¥È true - closeButtonClass -- ¥â¡¼¥À¥ë¤ËÇÛÃÖ¤µ¤ì¤¿ÊĤ¸¤ë¥Ü¥¿¥ó¤Î¥¯¥é¥¹ -- ¥Ç¥Õ¥©¥ë¥È ".close" - onOpen -- ¥â¡¼¥À¥ë¤¬³«¤¤¤¿»þ¤Ë¸Æ¤Ð¤ì¤ë¥³¡¼¥ë¥Ð¥Ã¥¯´Ø¿ô -- °ú¿ô the modal window $(function() { $(selector).easyModal({ overlayClose: false, onOpen: function(myModal){ $(myModal).append('Opened!'); } }); }); - onClose -- ¥â¡¼¥À¥ë¤¬ÊĤ¸¤¿»þ¤Ë¸Æ¤Ð¤ì¤ë¥³¡¼¥ë¥Ð¥Ã¥¯´Ø¿ô -- °ú¿ô: the modal window $(function() { $(selector).easyModal({ overlay : 0.4, onClose: function(myModal){ $(myModal).append('Closed!'); } }); }); - zIndex -- ¥â¡¼¥À¥ë¤Îz-index¤Î·×»»¤Ç¸Æ¤Ð¤ì¤ë´Ø¿ô -- ¥Ç¥Õ¥©¥ë¥È: ¥Ú¡¼¥¸+1Æâ¤ÇºÇ¤â¹â¤¤z-index¤òÊÖ¤·¤Þ¤¹¡£ - updateZIndexOnOpen -- z-index¤Ï¡¢¥â¡¼¥À¥ë¤¬³«¤¯¤È¤¤Ë·×»»¤µ¤ì¤ë¤Ù¤¤À¤¬¡¢¤³¤Î¥ª¥×¥·¥ç¥ó¤òfalse¤Ë¥»¥Ã¥È¤¹¤ë¤È¡¢½é´ü²½¤·¤¿¤È¤¤Ë·×»»¤µ¤ì¤Æ¥»¥Ã¥È¤µ¤ì¤ë¡£ -- 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 -- ²ÄÊÑÉý¤Î¥â¡¼¥À¥ë¤ò»È¤¤¤¿¤¤»þ(60%¤È¤«)¡¢¤³¤ì¤ò true ¤Ë¤¹¤ë¤È¡¢¤¤¤Ä¤Ç¤â³Î¼Â¤ËÃæ±û¤ËÇÛÃÖ¤¹¤ë -- ¥Ç¥Õ¥©¥ë¥È false