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

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

ただいまの
回答率

89.07%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,514

pololo

score 12

jQueryでモーダルウィンドウを表示しています。
Chrome,Safari等のブラウザでは問題ないのですが、
IE11とEdgeにて、モーダルを出すボタンをクリック直後、
白く一瞬光り、モーダルが表示されてしまいます。

// 検討中追加時ののモーダルウィンドウ
$(function() {
    $(".btn-add-bookmark").on("click", function() {
//------------------------------------------------------------------
// キーボード操作などにより、オーバーレイが多重起動するのを防止する
//------------------------------------------------------------------
    // ボタンからフォーカスを外す
        $(this).blur();
    // 新しくモーダルウィンドウを起動しない
        if($(".modal-overlay")[0]) return false;
    // 現在のモーダルウィンドウを削除して新しく起動する
        // if($(".modal-overlay")[0]) $(".modal-overlay").remove();
    // オーバーレイ用のHTMLコードを、[body]内の最後に生成する
        $("body").append('<div class="modal-overlay"></div>');
    // .modal-overlay 及び .modalcontent をフェードインさせる
        $(".modal-overlay, .modal-content").fadeIn("slow");
        centeringModalSyncer();

//------------------------------------------------------------------
// .modal-overlay または .modal-close のクリック時に実行する処理
//------------------------------------------------------------------
        $(".modal-overlay, .modal-close").off().on("click", function() {
        // .modal-overlay 及び .modal-close をフェードアウトする
            $(".modal-content, .modal-overlay").fadeOut("slow", function() {
            // フェードアウト後、 .modal-overlay をHTML(DOM)上から削除
                $(".modal-overlay").remove();
            });
        });

//------------------------------------------------------------------
// リサイズ操作をした際に、モーダルウィンドウを中央寄せにする
//------------------------------------------------------------------
    // Case.1 リサイズ操作の度に実行する場合
        // $(window).resize(centeringModalSyncer);
    // Case.2 リサイズ操作が終了したときのみ実行する場合
        var timer = false;
        $(window).resize(function() {
            if (timer !== false) clearTimeout(timer);
            timer = setTimeout(function() {
                centeringModalSyncer();
            }, 200);
        });

    //------------------------------------------------------------------
    // モーダルウィンドウを中央寄せする関数
    //------------------------------------------------------------------
        function centeringModalSyncer() {
        // 画面(ウィンドウ)の幅、高さを取得
            var w = $(window).width();
            var h = window.innerHeight;

        // コンテンツ(.modal-content)の幅、高さを取得
        // Case.1 margin 含める場合
            // var cw = $(".modal-content").outerWidth(true);
            // var ch = $(".modal-content").outerHeight(true);
        // Case.2 margin 含めない場合
            var cw = $(".modal-content").outerWidth();
            var ch = $(".modal-content").outerHeight();

        // .modal-content を真ん中に配置するのに、左端と上部から何ピクセル離せばいいか?を計算してCSSのポジションを設定する
        // Case.1 left と top で変数を分ける
        /*
            var pxleft = ((w - cw) / 2);
            var pxtop  = ((h - ch) / 2);
            $(".modal-content").css({
                "left":pxleft + "px",
                "top":pxtop + "px"
            });
        */
        // Case.2 プロパティを持たせて一つの変数に纏める
            var p_prop = {
                left:((w - cw) / 2),
                top:((h - ch) / 2)
            };
            $(".modal-content").css(p_prop);
        }
    });
});

表示させているhtmlのコード

<ul class="btn-box">
<li><a class="btn-add-bookmark"><i class="icon-clip"></i>モーダルオープン</a></li>
</ul>
<div class="modal-content">
<p>テキストテキスト</p>
<a class="modal-close"><i class="icon-close"></i></a>
</div>

モーダル部分のscss

.modal-content {
  position: relative;
  z-index: 4;
  width: 50%;
  padding: 40px 40px 30px;
  text-align: center;
  background: #fff;
  border-radius: 5px;
}
.modal-overlay {
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.65);
}
.modal-content,
.modal-overlay {
  position: fixed;
  display: none;
}
.modal-close {
  position: absolute;
  top: -25px;
  right: -25px;
  width: 50px;
  height: 50px;
  color: #fff;
  cursor: pointer;
  background-color: #33404c;
  border-radius: 50px;
  @include fz(25);
  i {
    vertical-align: middle;
  }
}

 試したこと

jsでオーバーレイ背景のfadeInをやめると、一瞬白くなる現象はないですが、
できれば同時にfadeInしてほしいです。
【書き換え前】
$(".modal-overlay, .modal-content").fadeIn("slow");
【書き換え後】
$(".modal-overlay").show();
$(".modal-content").fadeIn(1000);

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る