モーダルウィンドウã¨ã¯ã€ãªã‚“らã‹ã®ç”»é¢ã®åç”»é¢ã¨ã—ã¦ç”Ÿæˆã•ã‚Œã€é–‹ã„ã¦ã„ã‚‹é–“ã¯ä»–ã®ç”»é¢ã‚’æ“作ã§ããªã„インターフェースã«ãªã£ã¦ã„ã‚‹ç”»é¢ã§ã™ã€‚
今回ã¯ã€ã“ã®ãƒ¢ãƒ¼ãƒ€ãƒ«ã‚¦ã‚£ãƒ³ãƒ‰ã‚¦ã‚’ç°¡å˜ã«è¨ç½®ã™ã‚‹ã“ã¨ãŒã§ãã‚‹PopEasyã¨ã„ã†jQueryプラグインを紹介ã—ã¾ã™ã€‚
ç”»é¢é·ç§»ã‚’è¡Œã‚ãšã«ãƒ¡ãƒƒã‚»ãƒ¼ã‚¸ã‚„何ã‹ã®æƒ…å ±ã‚’è¡¨ç¤ºã—ãŸã‚Šã€å…¥åŠ›ãƒ•ã‚©ãƒ¼ãƒ を表示ã—ãŸã‚Šã€ç”»åƒã‚’拡大表示ã—ãŸã„ã¨ããªã©ã«ä¾¿åˆ©ã§ã™ã€‚
ç”»é¢é·ç§»ã‚’è¡Œã‚ãšã«è¡¨ç¤ºã§ãã‚‹ã¨ã„ã†ã®ãŒæœ€å¤§ã®åˆ©ç‚¹ãªã®ã§ã¯ãªã„ã§ã—ょã†ã‹ã€‚
PopEasyã‹ã‚‰ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã—ã¾ã™ã€‚
cssã€jsã‚’èªè¾¼ã€ä»¥ä¸‹ã®HTMLを作æˆã—ã¾ã™ã€‚
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<a class="modalLink" href="#modal1">クリック</a>
<div class="overlay"></div>
<div id="modal1_area" class="modal">
<p class="closeBtn">Close</p>
<h2 style="margin-bottom: 60px;">PopEasy</h2>
<p>モーダルã§è¡¨ç¤ºã•ã‚Œã¾ã™ã€‚</p>
</div>
<script type='text/javascript' src='js/jquery.modal.js'></script>
<script type='text/javascript' src='js/site.js'></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.0.min.js'></script>
ãŸã£ãŸã“ã‚Œã ã‘ã§ãƒ¢ãƒ¼ãƒ€ãƒ«ç”»é¢ã‚’è¨ç½®ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚