catch.jp-wiki
¥×¥í¥°¥é¥ß¥ó¥°
±Ñ¸ì³Ø½¬
ÍúÎò
¸¡º÷
Dropdown
°ìÍ÷
easyModal.js
¤ò¥Æ¥ó¥×¥ì¡¼¥È¤Ë¤·¤ÆºîÀ®
³«»Ï¹Ô:
[[Programing]] > easyModal.js
#title("easyModal.js¤Î»È¤¤Êý - ¤Û¤É¤è¤¤µ¡Ç½¤Î¥â¡¼¥À¥ë¥é¥¤...
Javascript/jQuery¤Î¥â¡¼¥À¥ë¥¦¥£¥ó¥É¥¦Íѥ饤¥Ö¥é¥ê¤òõ¤·¤Æ...
#contents
* ÆÃħ [#de95c6ee]
- leanModal.js¤Ë¥¤¥ó¥¹¥Ñ¥¤¥¢¡£
- ·ÚÎ̤«¤Ä¥·¥ó¥×¥ë(200¹Ô)¡£
- ¤À¤±¤É¡¢¤½¤³¤½¤³¥ª¥×¥·¥ç¥ó¤¬¤½¤í¤Ã¤Æ¤¤¤ë
- ÆÃÄê¤ÎCSS¤È¤«image¥Õ¥¡¥¤¥ë¤È¤«¤Ë°Í¸¤·¤Ê¤¤
- jQuery¥×¥é¥°¥¤¥ó(1.8.0 °Ê¹ß)
- MIT¥é¥¤¥»¥ó¥¹
* ¥Ç¥â [#d5c0f91a]
- http://www.catch.jp/program/easyModal.js/
* ¥À¥¦¥ó¥í¡¼¥É [#i6f93ec9]
- ËܲÈ/¥Þ¥Ë¥å¥¢¥ë http://flaviusmatis.github.io/easyModal...
- Github http://flaviusmatis.github.io/easyModal.js/
* ÀßÃÖÊýË¡ [#i1ab0190]
** Javascript¤òÀßÃÖ¤¹¤ë [#lcc24d74]
<script type="text/javascript" src="path_to/jquery.js"><...
<script type="text/javascript" src="path_to/jquery.easyM...
** ¥À¥¤¥¢¥í¥°¤Î¤Ò¤Ê·Á [#n7ed985e]
HTML¥Õ¥¡¥¤¥ë¤Ë¡¢¥À¥¤¥¢¥í¥°¤Î¤Ò¤Ê·Á¤ò¤ª¤¯¡£
<!-- Modal template -->
<div id="modal_alert">
<h5>¥¢¥é¡¼¥È</h5>
<p>* Hello World. This is easyModal.js *</p>
</div>
css¤ÇÈóɽ¼¨¤Ë¤·¤Æ¤ª¤¯
#modal_alert {
position: relative;
background-color: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
display: none;
padding: 30px;
overflow:auto;
}
** ¥À¥¤¥¢¥í¥°¤Î¸Æ¤Ó½Ð¤·¥Ü¥¿¥ó [#l22cd31f]
HTML¥Õ¥¡¥¤¥ë¤Ë¡¢¥À¥¤¥¢¥í¥°¤Î¸Æ¤Ó½Ð¤·¥Ü¥¿¥ó¤òÀßÃÖ¤¹¤ë¡£
<button class="open_alert">¥À¥¤¥¢¥í¥°¤ò³«¤¯</button>
** ¥À¥¤¥¢¥í¥°¤Î¸Æ¤Ó½Ð¤·¥³¡¼¥É [#v3ef604a]
Javascript¤Ç¡¢¥À¥¤¥¢¥í¥°¤Î¸Æ¤Ó½Ð¤·¥³¡¼¥É¤òµ½Ò¤¹¤ë¡£
$(function() {
<!-- # Alert -->
$("#modal_alert").easyModal();
$('.open_alert').click(function(e){
$('#modal_alert').trigger('openModal');
e.preventDefault();
});
});
* ¥ª¥×¥·¥ç¥ó [#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¤Ï¡¢¥â¡¼¥À¥ë¤ò³«¤¯¤È¤¤Ë·×»»¤¹¤ë¤Ù¤¤À¤¬¡¢¤³¤Î...
-- Wheter the z-index should be calculted, using the zInd...
-- ¥Ç¥Õ¥©¥ë¥È true
- hasVariableWidth
-- ²ÄÊÑÉý¤Î¥â¡¼¥À¥ë¤ò»È¤¤¤¿¤¤»þ(60%¤È¤«)¡¢¤³¤ì¤ò true ¤Ë...
-- ¥Ç¥Õ¥©¥ë¥È false
* ¥«¥¹¥¿¥Þ¥¤¥º [#d406fd70]
¥×¥é¥°¥¤¥ó¤ÎÃæ¤ò¤¤¤¸¤ëÊýË¡
** ¥â¡¼¥À¥ë¥À¥¤¥¢¥í¥°¤ò¡¢¥¹¥¯¥í¡¼¥ë¤Ç¤¤ë¤è¤¦¤Ë¤¹¤ë¤Ë¤Ï [...
85¹ÔÌܤ¢¤¿¤ê¡Ö$modal.css¡×¤Î¡Ö'position': 'fixed',¡×¤ò
$modal.css({
'display': 'none',
'position': 'fixed',
¡Ö'position' : 'absolute',¡×¤ËÊѹ¹¤¹¤ë¡£ËöÈø¤Î¥³¥ó¥Þ¤ò¤ª...
$modal.css({
'display': 'none',
'position' : 'absolute',
½ªÎ»¹Ô:
[[Programing]] > easyModal.js
#title("easyModal.js¤Î»È¤¤Êý - ¤Û¤É¤è¤¤µ¡Ç½¤Î¥â¡¼¥À¥ë¥é¥¤...
Javascript/jQuery¤Î¥â¡¼¥À¥ë¥¦¥£¥ó¥É¥¦Íѥ饤¥Ö¥é¥ê¤òõ¤·¤Æ...
#contents
* ÆÃħ [#de95c6ee]
- leanModal.js¤Ë¥¤¥ó¥¹¥Ñ¥¤¥¢¡£
- ·ÚÎ̤«¤Ä¥·¥ó¥×¥ë(200¹Ô)¡£
- ¤À¤±¤É¡¢¤½¤³¤½¤³¥ª¥×¥·¥ç¥ó¤¬¤½¤í¤Ã¤Æ¤¤¤ë
- ÆÃÄê¤ÎCSS¤È¤«image¥Õ¥¡¥¤¥ë¤È¤«¤Ë°Í¸¤·¤Ê¤¤
- jQuery¥×¥é¥°¥¤¥ó(1.8.0 °Ê¹ß)
- MIT¥é¥¤¥»¥ó¥¹
* ¥Ç¥â [#d5c0f91a]
- http://www.catch.jp/program/easyModal.js/
* ¥À¥¦¥ó¥í¡¼¥É [#i6f93ec9]
- ËܲÈ/¥Þ¥Ë¥å¥¢¥ë http://flaviusmatis.github.io/easyModal...
- Github http://flaviusmatis.github.io/easyModal.js/
* ÀßÃÖÊýË¡ [#i1ab0190]
** Javascript¤òÀßÃÖ¤¹¤ë [#lcc24d74]
<script type="text/javascript" src="path_to/jquery.js"><...
<script type="text/javascript" src="path_to/jquery.easyM...
** ¥À¥¤¥¢¥í¥°¤Î¤Ò¤Ê·Á [#n7ed985e]
HTML¥Õ¥¡¥¤¥ë¤Ë¡¢¥À¥¤¥¢¥í¥°¤Î¤Ò¤Ê·Á¤ò¤ª¤¯¡£
<!-- Modal template -->
<div id="modal_alert">
<h5>¥¢¥é¡¼¥È</h5>
<p>* Hello World. This is easyModal.js *</p>
</div>
css¤ÇÈóɽ¼¨¤Ë¤·¤Æ¤ª¤¯
#modal_alert {
position: relative;
background-color: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
display: none;
padding: 30px;
overflow:auto;
}
** ¥À¥¤¥¢¥í¥°¤Î¸Æ¤Ó½Ð¤·¥Ü¥¿¥ó [#l22cd31f]
HTML¥Õ¥¡¥¤¥ë¤Ë¡¢¥À¥¤¥¢¥í¥°¤Î¸Æ¤Ó½Ð¤·¥Ü¥¿¥ó¤òÀßÃÖ¤¹¤ë¡£
<button class="open_alert">¥À¥¤¥¢¥í¥°¤ò³«¤¯</button>
** ¥À¥¤¥¢¥í¥°¤Î¸Æ¤Ó½Ð¤·¥³¡¼¥É [#v3ef604a]
Javascript¤Ç¡¢¥À¥¤¥¢¥í¥°¤Î¸Æ¤Ó½Ð¤·¥³¡¼¥É¤òµ½Ò¤¹¤ë¡£
$(function() {
<!-- # Alert -->
$("#modal_alert").easyModal();
$('.open_alert').click(function(e){
$('#modal_alert').trigger('openModal');
e.preventDefault();
});
});
* ¥ª¥×¥·¥ç¥ó [#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¤Ï¡¢¥â¡¼¥À¥ë¤ò³«¤¯¤È¤¤Ë·×»»¤¹¤ë¤Ù¤¤À¤¬¡¢¤³¤Î...
-- Wheter the z-index should be calculted, using the zInd...
-- ¥Ç¥Õ¥©¥ë¥È true
- hasVariableWidth
-- ²ÄÊÑÉý¤Î¥â¡¼¥À¥ë¤ò»È¤¤¤¿¤¤»þ(60%¤È¤«)¡¢¤³¤ì¤ò true ¤Ë...
-- ¥Ç¥Õ¥©¥ë¥È false
* ¥«¥¹¥¿¥Þ¥¤¥º [#d406fd70]
¥×¥é¥°¥¤¥ó¤ÎÃæ¤ò¤¤¤¸¤ëÊýË¡
** ¥â¡¼¥À¥ë¥À¥¤¥¢¥í¥°¤ò¡¢¥¹¥¯¥í¡¼¥ë¤Ç¤¤ë¤è¤¦¤Ë¤¹¤ë¤Ë¤Ï [...
85¹ÔÌܤ¢¤¿¤ê¡Ö$modal.css¡×¤Î¡Ö'position': 'fixed',¡×¤ò
$modal.css({
'display': 'none',
'position': 'fixed',
¡Ö'position' : 'absolute',¡×¤ËÊѹ¹¤¹¤ë¡£ËöÈø¤Î¥³¥ó¥Þ¤ò¤ª...
$modal.css({
'display': 'none',
'position' : 'absolute',
¥Ú¡¼¥¸Ì¾: