Q&A
あなたが作った、コピペすれば問題を再現できる、必要最低限のコードを質問欄を編集して追記してください。あくまで必要最低限にしてください。で、スマホで試すというのは具体的にどのようにしたのかも質門欄を編集して追記してください。今の質問内容では丸投げ以下の低評価対象だと思いますよ。
モーダルウィンドウについての質問です。
ボタンを押したらモダールウィンドウで画像が開くという実装を、ギャラリーのように複数行いたいのですが、スマホとパソコンで表示する画像を変えたいです。
表示自体はパソコンとスマホどちらもうまくできるのですが、スマホでモダールを閉じるボタンを押すと、一旦消えるのに、また画像だけが表示されてしまいます。
どのようにしたらスマホでも画像が消えるか、お力添えをいただきたく存じます。
https://syncer.jp/jquery-modal-window
のサイトを参考に作りました。
ーモーダルを開く方のhtml－ <div class="select-box-item mr pc"> <img src="image/tokyo-kenkyo.jpg" alt=""> <h3 class="story-place">Tokyo Kenkyo<span>カフェ</span></h3> <p class="select-thin">３フロアから成るおしゃれカフェで、<br> 日替わりでほっこり味わう和＆洋モーニング</p> <a class="modal-syncer button-link readmore" data-target="modal-content-01">READ MORE<span class="arrow"></span></a> </div> <div class="select-box-item mr tab"> <img src="image/tokyo-kenkyo.jpg" alt=""> <h3 class="story-place">Tokyo Kenkyo<span>カフェ</span></h3> <p class="select-thin">３フロアから成るおしゃれカフェで、<br> 日替わりでほっこり味わう和＆洋モーニング</p> <a class="modal-syncer button-link readmore" data-target="modal-content-01-sp">READ MORE<span class="arrow"></span></a> </div> ―開いたモーダルの中身のhtml－ <div id="modal-content-01" class="modal-content pc"> <div class="modal-content-inner"> <img src="image/pc_run&walk_Tokyo.jpg" alt=""> <div class="button-link-x"> <a id="modal-close" class="button-link button-link-x"><i class="fas fa-times-circle"></i></a> </div> </div> </div> <div id="modal-content-01-sp" class="modal-content tab"> <div class="modal-content-inner"> <img src="image/sp_run&walk_Tokyo.jpg" alt=""> <div class="button-link-x"> <a id="modal-close" class="button-link button-link-x"><i class="fas fa-times-circle"></i></a> </div> </div> </div> ーjｓ－ //モーダルウィンドウ $(function(){ //グローバル変数 var nowModalSyncer = null ; //現在開かれているモーダルコンテンツ var modalClassSyncer = "modal-syncer" ; //モーダルを開くリンクに付けるクラス名 //モーダルのリンクを取得する var modals = document.getElementsByClassName( modalClassSyncer ) ; //モーダルウィンドウを出現させるクリックイベント for(var i=0,l=modals.length; l>i; i++){ //全てのリンクにタッチイベントを設定する modals[i].onclick = function(){ //ボタンからフォーカスを外す this.blur() ; //ターゲットとなるコンテンツを確認 var target = this.getAttribute( "data-target" ) ; //ターゲットが存在しなければ終了 if( typeof( target )=="undefined" || !target || target==null ){ return false ; } //コンテンツとなる要素を取得 nowModalSyncer = document.getElementById( target ) ; //ターゲットが存在しなければ終了 if( nowModalSyncer == null ){ return false ; } //キーボード操作などにより、オーバーレイが多重起動するのを防止する if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する //オーバーレイを出現させる $( "body" ).append( '<div id="modal-overlay"></div>' ) ; $( "#modal-overlay" ).fadeIn( "fast" ) ; //コンテンツをセンタリングする centeringModalSyncer() ; //コンテンツをフェードインする $( nowModalSyncer ).fadeIn( "slow" ) ; //[#modal-overlay]、または[#modal-close]をクリックしたら… $( "#modal-overlay,#modal-close" ).unbind().click( function() { //[#modal-content]と[#modal-overlay]をフェードアウトした後に… $( "#" + target + ",#modal-overlay" ).fadeOut( "slow" , function() { //[#modal-overlay]を削除する $( '#modal-overlay' ).remove() ; } ) ; //現在のコンテンツ情報を削除 nowModalSyncer = null ; } ) ; } } //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する $( window ).resize( centeringModalSyncer ) ; //センタリングを実行する関数 function centeringModalSyncer() { //モーダルウィンドウが開いてなければ終了 if( nowModalSyncer == null ) return false ; //画面(ウィンドウ)の幅、高さを取得 var w = $( window ).width() ; var h = $( window ).height() ; //コンテンツ(#modal-content)の幅、高さを取得 // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。 // var cw = $( nowModalSyncer ).outerWidth( {margin:true} ) ; // var ch = $( nowModalSyncer ).outerHeight( {margin:true} ) ; var cw = $( nowModalSyncer ).outerWidth() ; var ch = $( nowModalSyncer ).outerHeight() ; //センタリングを実行する $( nowModalSyncer ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ; } } ) ;
サーバーにアップして、PCとSPのモーダル画像を違う画像したく思います。PCですと普通に閉じるボタンを押すと消えるのですが、SPでも閉じるのですがその直後に自動的にモーダルが再度表示されてしまいます。
ご教授お願い申し上げます。
ご教授ありがとうございます。編集しました。
問題を再現できる必要最低限にはなってなくて丸投げに近いように見えますが？ たとえば、div, h3, p 要素など減らせるのでは？ 画像の数も減らせるのでは？ 「サイズされたら、センタリングをする関数」は問題と関係あるのですか？ コメントアウトしたコードも邪魔です。もっと削れると思うのですが。
なぜそう言っているかというと、必要最低限までコードをどんどん削っていくと、その過程で問題が見つかって自己解決できるかもしれないからです。そうできれば質問者さんとして一番望ましいことでは？
解決できなくても、必要最低限のところまで削ったコードなら、それをアップすれば見てくれる人も多いでしょうから、レスも多くなるのではと思います。（すみませんが、今質問に書かれているコードは、少なくとも自分は読む気力がわいてきません）
よく見ると
class="elect-box-item mr pc”
class="modal-content pc"
とかPC専用のスタイル使っているように見えるんだけど？
これモバイルの時
class="elect-box-item mr mobile”
class="modal-content mobile"
に切り替えてるの？
それともすでにモバイル用の画面があって
PCの時はPC画面表示モバイル画面非表示
モバイルのときPC画面非表示モバイル画面表示
とかにしていない？
その辺りの影響でモバイル時にPCの画面が表示さててるってことないよね？
あなたの回答
tips
プレビュー
