jQueryでモーダルウィンドウを表示しています。
Chrome,Safari等のブラウザでは問題ないのですが、
IE11とEdgeにて、モーダルを出すボタンをクリック直後、
白く一瞬光り、モーダルが表示されてしまいます。
js
1// 検討中追加時ののモーダルウィンドウ 2$(function() { 3 $(".btn-add-bookmark").on("click", function() { 4//------------------------------------------------------------------ 5// キーボード操作などにより、オーバーレイが多重起動するのを防止する 6//------------------------------------------------------------------ 7 // ボタンからフォーカスを外す 8 $(this).blur(); 9 // 新しくモーダルウィンドウを起動しない 10 if($(".modal-overlay")[0]) return false; 11 // 現在のモーダルウィンドウを削除して新しく起動する 12 // if($(".modal-overlay")[0]) $(".modal-overlay").remove(); 13 // オーバーレイ用のHTMLコードを、[body]内の最後に生成する 14 $("body").append('<div class="modal-overlay"></div>'); 15 // .modal-overlay 及び .modalcontent をフェードインさせる 16 $(".modal-overlay, .modal-content").fadeIn("slow"); 17 centeringModalSyncer(); 18 19//------------------------------------------------------------------ 20// .modal-overlay または .modal-close のクリック時に実行する処理 21//------------------------------------------------------------------ 22 $(".modal-overlay, .modal-close").off().on("click", function() { 23 // .modal-overlay 及び .modal-close をフェードアウトする 24 $(".modal-content, .modal-overlay").fadeOut("slow", function() { 25 // フェードアウト後、 .modal-overlay をHTML(DOM)上から削除 26 $(".modal-overlay").remove(); 27 }); 28 }); 29 30//------------------------------------------------------------------ 31// リサイズ操作をした際に、モーダルウィンドウを中央寄せにする 32//------------------------------------------------------------------ 33 // Case.1 リサイズ操作の度に実行する場合 34 // $(window).resize(centeringModalSyncer); 35 // Case.2 リサイズ操作が終了したときのみ実行する場合 36 var timer = false; 37 $(window).resize(function() { 38 if (timer !== false) clearTimeout(timer); 39 timer = setTimeout(function() { 40 centeringModalSyncer(); 41 }, 200); 42 }); 43 44 //------------------------------------------------------------------ 45 // モーダルウィンドウを中央寄せする関数 46 //------------------------------------------------------------------ 47 function centeringModalSyncer() { 48 // 画面(ウィンドウ)の幅、高さを取得 49 var w = $(window).width(); 50 var h = window.innerHeight; 51 52 // コンテンツ(.modal-content)の幅、高さを取得 53 // Case.1 margin 含める場合 54 // var cw = $(".modal-content").outerWidth(true); 55 // var ch = $(".modal-content").outerHeight(true); 56 // Case.2 margin 含めない場合 57 var cw = $(".modal-content").outerWidth(); 58 var ch = $(".modal-content").outerHeight(); 59 60 // .modal-content を真ん中に配置するのに、左端と上部から何ピクセル離せばいいか?を計算してCSSのポジションを設定する 61 // Case.1 left と top で変数を分ける 62 /* 63 var pxleft = ((w - cw) / 2); 64 var pxtop = ((h - ch) / 2); 65 $(".modal-content").css({ 66 "left":pxleft + "px", 67 "top":pxtop + "px" 68 }); 69 */ 70 // Case.2 プロパティを持たせて一つの変数に纏める 71 var p_prop = { 72 left:((w - cw) / 2), 73 top:((h - ch) / 2) 74 }; 75 $(".modal-content").css(p_prop); 76 } 77 }); 78}); 79
表示させているhtmlのコード
html
1<ul class="btn-box"> 2<li><a class="btn-add-bookmark"><i class="icon-clip"></i>モーダルオープン</a></li> 3</ul> 4<div class="modal-content"> 5<p>テキストテキスト</p> 6<a class="modal-close"><i class="icon-close"></i></a> 7</div>
モーダル部分のscss
scss
1.modal-content { 2 position: relative; 3 z-index: 4; 4 width: 50%; 5 padding: 40px 40px 30px; 6 text-align: center; 7 background: #fff; 8 border-radius: 5px; 9} 10.modal-overlay { 11 top: 0; 12 left: 0; 13 z-index: 3; 14 width: 100%; 15 height: 120%; 16 background-color: rgba(0, 0, 0, 0.65); 17} 18.modal-content, 19.modal-overlay { 20 position: fixed; 21 display: none; 22} 23.modal-close { 24 position: absolute; 25 top: -25px; 26 right: -25px; 27 width: 50px; 28 height: 50px; 29 color: #fff; 30 cursor: pointer; 31 background-color: #33404c; 32 border-radius: 50px; 33 @include fz(25); 34 i { 35 vertical-align: middle; 36 } 37}
試したこと
jsでオーバーレイ背景のfadeInをやめると、一瞬白くなる現象はないですが、
できれば同時にfadeInしてほしいです。
【書き換え前】
$(".modal-overlay, .modal-content").fadeIn("slow");
【書き換え後】
$(".modal-overlay").show();
$(".modal-content").fadeIn(1000);
不明点等ありましたら追記いたします。
よろしくお願いいたします。
あなたの回答
tips
プレビュー