質問: $('div'); $('label').on('click', function() { $(this).next($overlay).fadeIn(300); }); }); ``` ※jQueryのver.は3.3.1です。 ### 試したこと overflow-x:scroll; または -webkit-overflow-scrolling:touch; を切ると意図通りの動きになりますが この2つを指定したままでモーダルを発動させたいのですが 上手くいきません。
回答: overflow-x:scroll; -webkit-overflow-scrolling:touch; の両方を指定している状態で実現する事は現状不可能に近い事が判明した為 モーダル表示させるコンテンツを要素の外にコピーして表示する方法で暫定的に実現。 フロー 1)カルーセルコンテンツのをタップ 2)要素の直後にある非表示状態モーダルコンテンツをコピー 3)カルーセルコンテンツの外にあるdiv.modalにコピーしたコンテンツをappend 4).modalをフェードイン 5)モーダルコンテンツ内の閉じるボタンをタップしたら 6).modalをフェードアウト 7).modalにペーストされていたコンテンツを空に戻す という面倒な段階を踏むことになりましたが 一応意図通りの動きにはなりました。 これしか方法無いのかなぁ......。 ``` button1 モーダル表示させるコンテンツ1閉じる button2 モーダル表示させるコンテンツ2閉じる button3 モーダル表示させるコンテンツ3閉じる ``` ``` ul{ width:100%; overflow-x:scroll; -webkit-overflow-scrolling:touch; overflow-scrolling:touch; display:flex; list-style:none; } li{ width:250px; min-width:250px; padding:20px; box-sizing:border-box; border:1px solid #CCC; } label{cursor:pointer;} label:after{content:none;} .off{ display: none;/*liモーダル表示させるコンテンツ(非表示)*/ } .on{ padding:20px;/*ulの外にコピーする部分*/ } p{ background-color: #FFF; padding:20px; } .modal{ display:none; position:fixed; top:0;left:0;right:0;bottom:0; z-index:100; background-color:rgba(0, 0, 0, .70); } button{cursor:pointer;} ``` ``` $(function() { $("label").on('click',function(){ //クリックされた要素の次のdivの小要素をコピーして.modalにペースト $(this).next("div").children(".on").clone().appendTo(".modal"); //.modalをフェードイン $(".modal").fadeIn(300); //.closeが押されたら $("button").on("click",function(){ $.when(//.modalをフェードアウトしてから $(".modal").fadeOut(300) ).done(//.modalにペーストした内容を削除 $(".modal").empty() ) }); }); }); ```