ID非公開

2020/9/22 15:02

11回答

【jQuery】モーダルウィンドウでボタン実装でご教授願います。 こんにちは、質問見て下さり有難うございます。

【jQuery】モーダルウィンドウでボタン実装でご教授願います。 こんにちは、質問見て下さり有難うございます。 大変行き詰っており、どうか、お知恵を貸していただけましたら幸いです。 当方、ソースをいただいて実装は何とか出来るのですが、jQueryのソースを理解し、作るスキルはございません。ご容赦願います。 只今、こちらの記事を参考にモーダルウィンドウを実装したく思っております。 https://web-dragon.com/coding/modal_window/ 実装デモはこちらです。 https://web-dragon.com/demo/modal_window170627.html 上から落ちてくるウインドウが気に入り、ソースも至って簡潔でした。 実装は出来たのですが、理想としましては、ボタンを文字(「表示」というところ)ではなく、画像で実装したいと思っております。 ところが <button id="btn_open">表示</button> この「表示」の間に画像を入れると、背景黒、ボーダー付き、マウスオーバーでブルーとボーダー付きになってしまいます。 また、画像と画像の間はピッタリくっつけたいのですが、隙間空いてしまいますが、これは別途のimgへの設定でしょうか。 ※至らないのですが、ブラウザ上での確認の画像添付いたします。 cssみましても、このボタン部分はありませんので、ボタンはjQueryで制御、指定しているのかと思うのですが、borderやbackgroundcolorがないのです…。 idにある部分で、 btnOpen = $("#btn_open"), btnClose = $(".btn_close"); だと思うのですが、その後に続く btnOpen にも特にそのような記述はなく… 試しに、画像にそのまま背景白で定義したのですが、変わらずです。。。 jsに何か定義をしてあげるのかなと思うのですが、前述スキルがないため、行き詰ってしまい、どうかお力を貸していただきたく、こちらで書き込ませていただきました。 どなたか、どうか助けていただけませんでしょうか? コインくらいしかお礼できませんが、一生懸命実装したいと思ってます。 何卒宜しくお願いいたします。

画像

JavaScript | HTML、CSS23閲覧xmlns="http://www.w3.org/2000/svg">500

ベストアンサー

0

ID非公開さん >・・・・画像と画像の間はピッタリくっつけたい・・・・・・・・・・・・・・・ ご参考に↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>モーダルウィンドウ</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function(){ var modal = $('#modal'), modalContent = $('#modal_content'), btnOpen = $("#btn_open"), btnClose = $(".btn_close"), modal2 = $('#modal2'), modalContent2 = $('#modal_content2'), btnOpen2 = $("#btn_open2"); $(btnOpen).on('click', function() { modal.show(); }); $(btnOpen2).on('click', function() { modal2.show(); }); $(modal).on('click', function(event) { if(!($(event.target).closest(modalContent).length)||($(event.target).closest(btnClose).length)){ modal.hide(); } }); $(modal2).on('click', function(event) { if(!($(event.target).closest(modalContent2).length)||($(event.target).closest(btnClose).length)){ modal2.hide(); } }); }); </script> <style> #btn_open, #btn_open2{ margin:0; padding:0; } #modal, #modal2{ display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); } #modal_content, #modal_content2{ width:500px; background:#fff; margin:15% auto; padding:10px; position:relative; animation:animatetop 0.4s; } @keyframes animatetop{ from{top:-300px;opacity:0} to{top:0;opacity:1} } </style> </head> <body> <span id="btn_open"><img src="https://s.yimg.jp/images/ks/official/nt/grd/prf_48.png" ></span><span id="btn_open2"><img src="https://s.yimg.jp/images/ks/official/qa/ico_no_avater.gif" ></span> <div id="modal"> <div id="modal_content"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <button class="btn_close">閉じる</button> </div> </div> <div id="modal2"> <div id="modal_content2"> <p>テキスト2 テキスト2 テキスト2 テキスト2 テキスト2 テキスト2 テキスト2 </p> <p>テキスト2 テキスト2 テキスト2 テキスト2 テキスト2 テキスト2 テキスト2 </p> <button class="btn_close">閉じる</button> </div> </div> </body> </html>

ID非公開

質問者

2020/9/22 23:47

すごいです! 明日早速実装してみます!楽しみです! 有難うございました、また改めて伺います!

ThanksImg質問者からのお礼コメント

ybb********さま この度はお世話になりました。 見ず知らずの私の質問に応えていただき、本当に有難うございました! 自力では到底たどり着けなかったので、ybb様に見つけていただき本当に運が良かったと…本当に感謝しております。 沢山の方がybb様の知識に救われているかと思います。 素晴らしいです。 またお世話になりました時は宜しくお願いいたします! 有難うございました^^

お礼日時:9/25 22:27