iframe内のモーダルは、他のモーダルを閉じた後にメインウィンドウのスクロールを削除します。

iframeを持つページがあります。このiframeにはモーダルを開くボタンがあります。モーダルコードはメインウィンドウにあり、iframe内にはありません。iframe内のモーダルは、他のモーダルを閉じた後にメインウィンドウのスクロールを削除します。

このモーダルでは、他のモーダルを開くボタンがあります。この2番目のモーダルはメインウィンドウにあり、iframeの内側にはありません。

2つのモーダルを閉じると、メインウィンドウのスクロールが消えます。

Google Chrome Inspectorを見ると、bodyタグに「modal-open」というクラスがあります。このクラスを削除すると、スクロールが再び元に戻ります。

iframeのボタンを使用してモーダルを開くことなく2番目のモーダルを開くと、すべて正常に動作します。最初のiframe内のボタンでモーダルを開き、2つ目のモーダルを閉じた後、2つ目のモーダルを閉じた後、クラス "モーダルオープン"がボディタグ（メインウィンドウ）から削除されず、スクロールが消えてしまいます。それが削除されるため、

$('#my-second-modal').on('hide.bs.modal', function (event) { 
    $('body').removeClass('modal-open'); 
});

それは動作します：

私はこのコードで、後の第二のモーダルを閉じ、メインウィンドウのボディタグからクラス「モーダル・オープン」削除を強制しようとしたんですクラス "モーダルオープン"ですが、自動的にこのクラスが再び追加されます！私は、クラスが削除されて追加されて参照してください！

モーダルを開くと、bodyタグは「オープンモーダル」と少しインラインスタイルクラスを受ける：

style="padding-right: 15px;"

私は2番目のモーダルを閉じると、このスタイルはcorrectlly除去され、再び追加されませんクラス "モーダルオープン"のみです。

このクラスが自動的にどのように追加されるのか分かりません。別のページに2つのモダルもありますが、すべてのモーダルがメインウィンドウで呼び出されますが、iframeはありません。そして、このページで、うまく動作します。

問題は、iframe内部で呼び出されるモーダルに問題があります。

私はTwitter Bootstrap 3.3.7を使用しています。

私は何か助けに感謝します。

EDIT 1：

私は情報を修正しなければならなかった、beacuse両方のモーダルは、メインウィンドウにあります。最初のモーダルを呼び出すボタンだけがiframeの内側にあります。

最初のモーダル（iframe内のボタン）を開くと、iframe内のbodyタグは "modal-open"クラスを受け取ります。 2番目のモーダル（最初のモーダルの内側にあるボタン）を開くと、メインウィンドウのbodyタグは "モーダルオープン"クラスを受け取ります。

2番目のモーダルを閉じると、メインウィンドウのbodyタグのインラインスタイル（パディング左）は削除されますが、 "モーダルオープン"クラスは削除されません。最初のモーダルを閉じると、iframe内のbodyタグのクラス "モーダルオープン"が正しく削除されます。

メインウィンドウコード

<!DOCTYPE html> 
<html lang="pt-BR"> 
<head> 
    <title>Main Window</title> 
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 
    <link rel="stylesheet" media="all" href="/dev-assets/font-awesome.self-ae5944f442c4b0b183eda9a324292760ce827907d2ce6c2a238b2731b326a7f1.css?body=1" /> 
    <link rel="stylesheet" media="all" href="/dev-assets/my-page.self-5cb0c84bdcdd793a871aa1a02ed64373c4e5e2090ed90f8dc6a2b533a400938c.css?body=1" /> 
    <!--[if IE]><link rel="stylesheet" media="all" href="/stylesheets/iehacks.css" /><![endif]--> 
</head> 

<body> 
    <main class="container"> 
     <section class="application"> 
      <div id="iframe_edit"> 
       <iframe src="/my-page?edit_fields=1" onload="this.style.height=this.contentDocument.body.scrollHeight +'px';"></iframe> 
      </div> 

      <!-- THIS IS THE FIRST MODAL CALLED INSIDE IFRAME --> 
      <div class="modal fade" id="modalFields" tabindex="-1" role="dialog" aria-labelledby="modalFieldsLabel"> 
       <div class="modal-dialog modal-lg" role="document"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
          <h4 class="modal-title" id="modalFieldsLabel">TITLE FIRST MODAL</h4> 
         </div> 
         <div class="modal-body"> 
          <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalFields"> 
           Launch Second Modal 
          </button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </section> 
    </main> 

    <script src="/dev-assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script> 
    <script src="/dev-assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script> 
    <script src="/dev-assets/bootstrap/modal.self-3e78617ade5663314b7ee0ea10375a5b34d59ffbade44939e3f2a4e4ef2019b3.js?body=1"></script> 
    <script src="/dev-assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1"></script> 
    <script src="/dev-assets/jquery.mask.self-3b775d6e0b0f5cff98aca4daaa7f27a7c3678f39d1f5186776bb14b63cc2f625.js?body=1"></script> 
    <script src="/dev-assets/my-page.self-379839c031efa970d9805b32480311472415bda146fb2a677aef5d7f882313b1.js?body=1"></script> 

    <!-- THIS IS THE SECOND MODAL CALLED IN THE FIRST MODAL --> 
    <div class="modal fade" id="ModalGalleryImg" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"> 
     <div class="modal-dialog modal-lg" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="ModalLabel">TITLE SECOND MODAL</h4> 
       </div> 
       <div class="content modal-body"> 
        <div class='content'> 
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet minima iure consequuntur, fugiat, quasi fugit molestiae, cumque tempora similique sunt. Animi veniam architecto odit id mollitia modi placeat rerum. 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

のiframeコード

<!DOCTYPE html> 
<html lang="pt-br"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 
    <title>My IFRAME</title> 
    <meta property="og:title" content="My IFRAME"> 
    <meta name="twitter:title" content="My IFRAME"> 

    <meta name="csrf-param" content="authenticity_token" /> 
    <meta name="csrf-token" content="/piq31mMqVDPVA0evy8fn6BkMK6OoQ1x1JSnNJ7QKezoWF+amLU4F+S5CN0oKHpFXz1IvUg98wiJeWk//ZyroA==" /> 
    <link rel="stylesheet" media="all" href="/dev-assets/font-awesome.self-ae5944f442c4b0b183eda9a324292760ce827907d2ce6c2a238b2731b326a7f1.css?body=1" /> 
    <link rel="stylesheet" media="all" href="/dev-assets/my-iframe/css/style.self-8c572b6acc14a939ae61a606b2bfe36f8c47defcbe0c2e9fb8d8061f773a00a0.css?body=1" /> 
    <link rel='dns-prefetch' href='//s.w.org'> 
</head> 

<body class="palette-main"> 
    <header class="container bg-header"></header> 
    <div id="MenuArea" class="container"></div> 

    <main class="container"> 
     <div class="row"> 
      <div class="col-xs-12" data-group="group1"> 
       <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalFields"> 
        Launch First Modal 
       </button> 

       <div class="contorno-topico"> 
        <div class="caption-main"> 
         <h3 class="title-white" data-line="title_group1">TITLE G1</h3> 
         <p data-multiline="body_group1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima sit quisquam tempora? At obcaecati similique ab soluta illo, itaque? Voluptates quia fugiat ullam nihil esse doloremque possimus omnis perspiciatis laborum.</p> 
        </div> 
        <div style="background-image: url(/dev-assets/default-654645645.jpg); background-size: contain" data-bg="/dev-assets/default-654645645.jpg" data-image="image_group1"></div> 
       </div> 
      </div> 
     </div> 
    </main> 

    <script src="/dev-assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script> 
    <script src="/dev-assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script> 
    <script src="/dev-assets/site.self-4f08fc2b9ee0dc10cdc3b91b3c48199e757c0564fe65e1fe4f9bf26bb354b1f1.js?body=1"></script> 
    <script src="/dev-assets/bootstrap.min.self-d66e555f160df017adf1ca16a36cd609a36d49c51637e365c5b8847d0065fa40.js?body=1"></script> 
    <script src="/dev-assets/my-iframe/js/main.self-b849589d36316233b46ae6e1419e23af2945ebc08a0aac2529a52985f6f94b2a.js?body=1"></script> 
</body> 
</html>

出典

2017-12-12 DR.Somar

あなたの質問にあなたのコードを添付してください。 –

@ hamed-javaheriコメントありがとうございました。私はコードを追加し、いくつかの情報を修正しました。 –

私は、モーダルを開くための方法を変更する質問を解決しました。ではなく、オープンデータは、ボタンの属性で、私はJSを使用しています：モーダルがメインで開かれます。これにより、モーダル

$('.first-modal').click(function(){ 
     window.parent.$('#modalFields').modal('show'); 
    });

を開くためのiframe内のボタンで

をクリックしウィンドウのコンテキストとうまく動作します。

出典

2017-12-12 21:01:56

iframe内のモーダルは、他のモーダルを閉じた後にメインウィンドウのスクロールを削除します。

答えて

関連する問題