質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

717閲覧

モーダル表示時にIEで一瞬白くなる

pololo

総合スコア12

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/03/14 03:31

編集2022/01/12 10:55

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);

不明点等ありましたら追記いたします。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問