http://cosarin.com/js_easy_popup/
↑まさしく上記サイトのようなことがしたいのですが
私の知識では上記サイトの説明では理解できません。
根本的に間違いだらけなのでしょうが何が間違いか、どこから勉強したらいいか
皆目見当がつきません
<html> <head> <title>タイトル</title> <style type="text/css"> <!-- /* common setting */ .popup { display: none; position: fixed; top: 50%; left: 50%; background-color: #fff; overflow: hidden; z-index: 101; } .popup_inner { padding: 20px; } #overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.7; z-index: 100; } /* individual setting */ #popup1 { width: 600px; } //--> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <a href="#popup1" class="popup_btn">ボタン</a> <div id="popup1" class="popup"> <div class="popup_inner"> <h4>タイトル</h4> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> <div> <a href="#close_btn" class="close_btn">閉じる</a> </div> </div> </div> <div id="overlay"></div> <script type="text/javascript"> (function($){ $(function(){ $(document) .on('click', '.popup_btn', function(){ var $popup = $((this).attr('href')); // ポップアップの幅と高さからmarginを計算する var mT = ($popup.outerHeight() / 2) * (-1) + 'px'; var mL = ($popup.outerWidth() / 2) * (-1) + 'px'; // marginを設定して表示 $('.popup').hide(); $popup.css({ 'margin-top': mT, 'margin-left': mL }).show(); $('#overlay').show(); return false; }) .on('click', '.close_btn, #overlay', function(){ $('.popup, #overlay').hide(); return false; }); }); })(jQuery); </script> </body> </html>
サイトを参考にコピペで構築してみたのですが
上記が限界です
http://cosarin.com/js_easy_popup/
↑上記サイトの説明をもうすこしかみ砕いて初心者にもわかるようご教授ください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/15 22:14
2017/06/16 04:53
2017/06/16 05:26 編集