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

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

質問する

ただいまの
回答率

88.20%

IEでのモーダルウインドウ表示

解決済

回答 2

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 7,364
hati3693

hati3693

score 23

前提・実現したいこと

Lightboxのようにギャラリーページの画像をクリックでモーダルウインドウ（説明文）を表示したいです。

発生している問題・エラーメッセージ

どうしてもIEでうまく表示されません。
http://coolwebwindow.com/jquery-lab/archives/352
↑上記のサイトを元に、リンクを画像にして作業すると
IE限定で、ポップアップが半分左に隠れた状態になります。
ブラウザを縮めると見えなくなります。
おそらくmodalResize()が問題かと思うのですが、解決できません。 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="modal.js"></script>
<title>テスト</title>
</head>
<body>
<a data-target="con1" class="modal-open">
 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt="">
</a>
<a data-target="con2" class="modal-open">
 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt="">
</a>
<a data-target="con3" class="modal-open">
 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt="">
</a>
<!-- モーダル1 -->
<div id="con1" class="modal-content" align="center">
    <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""><img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""><img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt="">
<h3>テスト1</h3>
<span>IE限定で左に画面半分くらいずれてしまう・・</span>
<p><a class="modal-close">閉じる</a></p>
</div>

<!-- モーダル2 -->
<div id="con2" class="modal-content" align="center">
    <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""><img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt="">
    <h3>テスト2</h3>
    <span>IE限定で左に画面半分くらいずれてしまう・・</span>
    <p><a class="modal-close">閉じる</a></p>
</div>

<!-- モーダル3 -->
<div id="con3" class="modal-content" align="center">
    <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt="">
    <h3>テスト3</h3>
    <span>IE限定で左に画面半分くらいずれてしまう・・</span>
    <p><a class="modal-close">閉じる</a></p>
</div>
</body>
</html>
body {
    margin:10px;
    padding:10px;
    border:10px solid #ddd;
}

.lock {
    overflow:hidden;
}

.modal-content {
    position:relative;
    display:none;
    width:50%;
    margin:30px;
    padding:10px 20px;
    border:2px solid #aaa;
    background:#fff;
}

.modal-content p {
    margin:0;
    padding:0;
}

.modal-overlay {
    z-index:1;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.75);
}

.modal-wrap {
    z-index:2;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
}

.modal-open {
    color:#00f;
    text-decoration:underline;
}

.modal-open:hover {
    cursor:pointer;
    color:#f00;
}

.modal-close {
    color:#00f;
    text-decoration:underline;
}

.modal-close:hover {
    cursor:pointer;
    color:#f00;
}
$(function(){
    // スクロールバーの横幅を取得
    $('html').append('<div class="scrollbar" style="overflow:scroll;"></div>');
    var scrollsize = window.innerWidth - $('.scrollbar').prop('clientWidth');
    $('.scrollbar').hide();

    // 「.modal-open」をクリック
    $('.modal-open').click(function(){
        // html、bodyを固定（overflow:hiddenにする）
        $('html, body').addClass('lock');

        // オーバーレイ用の要素を追加
        $('body').append('<div class="modal-overlay"></div>');

        // オーバーレイをフェードイン
        $('.modal-overlay').fadeIn('slow');

        // モーダルコンテンツのIDを取得
        var modal = '#' + $(this).attr('data-target');

         // モーダルコンテンツを囲む要素を追加
        $(modal).wrap("<div class='modal-wrap'></div>");

        // モーダルコンテンツを囲む要素を表示
        $('.modal-wrap').show();

        // モーダルコンテンツの表示位置を設定
        modalResize();

         // モーダルコンテンツフェードイン
        $(modal).fadeIn('slow');

        // モーダルコンテンツをクリックした時はフェードアウトしない
        $(modal).click(function(e){
            e.stopPropagation();
        });

        // 「.modal-overlay」あるいは「.modal-close」をクリック
        $('.modal-wrap, .modal-close').off().click(function(){
            // モーダルコンテンツとオーバーレイをフェードアウト
            $(modal).fadeOut('slow');
            $('.modal-overlay').fadeOut('slow',function(){
                // html、bodyの固定解除
                $('html, body').removeClass('lock');
                // オーバーレイを削除
                $('.modal-overlay').remove();
                // モーダルコンテンツを囲む要素を削除
                $(modal).unwrap("<div class='modal-wrap'></div>");
           });
        });

        // リサイズしたら表示位置を再取得
        $(window).on('resize', function(){
            modalResize();
        });

        // モーダルコンテンツの表示位置を設定する関数
        function modalResize(){
            // ウィンドウの横幅、高さを取得
            var w = $(window).width();
            var h = $(window).height();

            // モーダルコンテンツの横幅、高さを取得
            var mw = $(modal).outerWidth(true);
            var mh = $(modal).outerHeight(true);

            // モーダルコンテンツの表示位置を設定
            if ((mh > h) && (mw > w)) {
                $(modal).css({'left': 0 + 'px','top': 0 + 'px'});
            } else if ((mh > h) && (mw < w)) {
                var x = (w - scrollsize - mw) / 2;
                $(modal).css({'left': x + 'px','top': 0 + 'px'});
            } else if ((mh < h) && (mw > w)) {
                var y = (h - scrollsize - mh) / 2;
                $(modal).css({'left': 0 + 'px','top': y + 'px'});
            } else {
                var x = (w - mw) / 2;
                var y = (h - mh) / 2;
                $(modal).css({'left': x + 'px','top': y + 'px'});
            }
        }

    });
});

試したこと

chrome,firefox,スマホでの表示は正常なのを確認しております。
どうしてもIEだけうまくいきません。
モーダルウインドウ内の画像を２つ、３つにすると起きる現象で、パソコンの高さよりモーダルウインドウが低ければ起こりません。

どうかご教授願いたいです。
よろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2 件

link

checkベストアンサー

+1

以下のように行ってはいかがでしょうか？ 

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <style type="text/css">
        body {
            margin: 10px;
            padding: 10px;
            border: 10px solid #ddd;
        }

        /* 追加ここから */
        div.modal-content img {
            max-width: 100%;
            margin-right: 5px;
        }

        div.modal-content img:last-of-type {
            margin-right: 0;
        }
        /* 追加ここまで */

        .lock {
            overflow: hidden;
        }

        .modal-content {
            position: relative;
            display: none;
            width: 50%;
            margin: 30px;
            padding: 10px 20px;
            border: 2px solid #aaa;
            background: #fff;
        }

        .modal-content p {
            margin: 0;
            padding: 0;
        }

        .modal-overlay {
            z-index: 1;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 120%;
            background-color: rgba(0, 0, 0, 0.75);
        }

        .modal-wrap {
            z-index: 2;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
        }

        .modal-open {
            color: #00f;
            text-decoration: underline;
        }

        .modal-open:hover {
            cursor: pointer;
            color: #f00;
        }

        .modal-close {
            color: #00f;
            text-decoration: underline;
        }

        .modal-close:hover {
            cursor: pointer;
            color: #f00;
        }
    </style>
    <title>テスト</title>
</head>
<body>
<a data-target="con1" class="modal-open">
    <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt="">
</a>
<a data-target="con2" class="modal-open">
    <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt="">
</a>
<a data-target="con3" class="modal-open">
    <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt="">
</a>
<div id="con1" class="modal-content" align="center">
    <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt="">
    <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt="">
    <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt="">
    <h3>テスト1</h3>
    <span>IE限定で左に画面半分くらいずれてしまう・・</span>
    <p><a class="modal-close">閉じる</a></p>
</div>
<div id="con2" class="modal-content" align="center">
    <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""><img
        src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt="">
    <h3>テスト2</h3>
    <span>IE限定で左に画面半分くらいずれてしまう・・</span>
    <p><a class="modal-close">閉じる</a></p>
</div>
<div id="con3" class="modal-content" align="center">
    <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt="">
    <h3>テスト3</h3>
    <span>IE限定で左に画面半分くらいずれてしまう・・</span>
    <p><a class="modal-close">閉じる</a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function () {
        $('html').append('<div class="scrollbar" style="overflow:scroll;"></div>');
        var scrollsize = $(window).innerWidth() - $('.scrollbar').innerWidth(); // 修正
        $('.scrollbar').hide();
        $('.modal-open').click(function () {
            $('html, body').addClass('lock');
            $('body').append('<div class="modal-overlay"></div>');
            $('.modal-overlay').fadeIn('slow');
            var modal = '#' + $(this).attr('data-target');
            $(modal).wrap("<div class='modal-wrap'></div>");
            $('.modal-wrap').show();
            modalResize();
            $(modal).fadeIn('slow');

            $(modal).click(function (e) {
                e.stopPropagation();
            });
            $('.modal-wrap, .modal-close').off().click(function () {
                $(modal).fadeOut('slow');
                $('.modal-overlay').fadeOut('slow', function () {
                    $('html, body').removeClass('lock');
                    $('.modal-overlay').remove();
                    $(modal).unwrap("<div class='modal-wrap'></div>");
                });
            });
            $(window).on('resize', function () {
                modalResize();
            });

            function modalResize() {
                var w = $(window).width();
                var h = $(window).height();
                var mw = $(modal).outerWidth(true);
                var mh = $(modal).outerHeight(true);

                if ((mh > h) && (mw > w)) {
                    $(modal).css({'left': 0 + 'px', 'top': 0 + 'px'});
                } else if ((mh > h) && (mw < w)) {
                    var x = (w - mw - scrollsize) / 2;
                    $(modal).css({'left': x + 'px', 'top': 0 + 'px'});
                } else if ((mh < h) && (mw > w)) {
                    var y = (h - scrollsize - mh) / 2;
                    $(modal).css({'left': 0 + 'px', 'top': y + 'px'});
                } else {
                    var x = (w - mw) / 2;
                    var y = (h - mh) / 2;
                    $(modal).css({'left': x + 'px', 'top': y + 'px'});
                }
            }
        });
    });
</script>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/26 13:08

    ご回答ありがとうございます。
    修正したところ、IEでも中央に表示されるようになりました！
    ありがとうございました。

    キャンセル

link

0

「モーダル」の意味を分かってないようです。モーダルウィンドウは javascript の   alert や confirm のように、開いたらそれしか操作できないものです。複数同時に開くのは想定外です。

【追伸】

注文を付けるばかりでは何ですので、参考にされているサイトのデモを見てみました。

http://coolwebwindow.com/jquery-lab/archives/352
↑上記のサイトを元に、リンクを画像にして作業すると
IE限定で、ポップアップが半分左に隠れた状態になります。

・・・とのことですが、そもそもそのサイトのデモでも Windows 10 の IE11 では不具合があります。

例えば［リンク1］をクリックすると Chrome 60.0.3112.113 であればブラウザの画面上で左右方向では真ん中に表示されますが、Windows 10 の IE11 では「ポップアップが半分左に隠れた状態」になります。

ということで、そもそも参考にされている記事のコードに不具合があって、それをベースに使って同じ不具合が出たということのように思われますが。

何が違うのか IE11 の F12 開発者ツールと Chrome のディベロッパーツールでスタイルを調べてみると、モーダルウィンドウに適用されているインラインのスタイルが以下のようになっていました。

IE11

{
left: -346px;
top: 0px;
display: block;
}

Chrome 

element.style {
display: block;
left: 139.5px;
top: 0px;
}

この left の設定が問題のようです。

これはスクリプトで計算してインラインに追加しているようですが、そこのところで IE11 と Chrome の違いが計算結果の違いになっているようです。

そこを直さないとダメだと思うのですが、どうすべきかまでは調べ切れていません。

そこを直そうとして悩むより、jQuey UI の Dialog とかもっと実績のあるものを使った方が良いのでは？

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/26 10:18

    ご回答ありがとうございます。
    モーダルを開いた状態でもう一つ開くのではなく、
    Lightboxのように画像クリックで説明文→閉じた後で別の画像クリック→説明文…
    のようにしたかったのですが、こういったことも出来ないのでしょうか？

    キャンセル

  • 2017/08/26 12:35

    「モーダル」という言葉の使い方が間違っています。「モーダル」をキーワードにググってヒットする記事を 2, 3 読んでください。ここのような文章だけでやり取りをする Q&A サイトでは正しく用語を使わないと話が通じません。というか、最初の質問文の上の方にあった「モーダルウィンドウを複数開く」というところだけ読んで、それ以上は読む気がしなくなる人も多いのではないかと思います（自分がそうです）。

    キャンセル

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

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る