Modal innerhalb eines iframe entfernt Scroll im Hauptfenster, nach anderen modalen schließen

Ich habe eine Seite mit einem iframe. In diesem Iframe habe ich einen Button, der ein Modal öffnet. Der modale Code befindet sich im Hauptfenster, nicht im Iframe.Modal innerhalb eines iframe entfernt Scroll im Hauptfenster, nach anderen modalen schließen

In diesem Modal habe ich eine Schaltfläche, die andere modale öffnet. Dieses zweite Modal befindet sich im Hauptfenster, nicht im Iframe.

Wenn ich die 2 Modale schließe, ist der Bildlauf im Hauptfenster weg.

Mit dem Google Chrome Inspector sehe ich die Klasse "modal-open" im Body-Tag. Wenn ich diese Klasse entferne, ist der Bildlauf wieder zurück.

Wenn ich das zweite Modal öffne, ohne das Modal über den Button im Iframe zu öffnen, funktioniert alles. Wenn ich das Modal mit der Schaltfläche innerhalb von iframe öffne und dann das zweite modal öffne, wird nach dem Schließen der 2 Modale die Klasse "modal-open" nicht aus dem body-Tag (Hauptfenster) entfernt und der scroll ist verschwunden.

Ich bin versucht, die Klasse „modal-open“ aus dem Body-Tag im Hauptfenster zu zwingen, zu entfernen, nachdem die zweiten modalen schließen, mit diesem Code:

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

Es funktioniert, weil es das entfernt Klasse "modal-open", aber automatisch wird diese Klasse wieder hinzugefügt! Ich sehe, dass die Klasse entfernt und hinzugefügt wird!

Wenn die modale öffnet, erhält der Körper Tag die Klasse „modal-open“ und ein wenig Inline-Stil:

style="padding-right: 15px;"

Wenn ich den zweiten modalen schließen, wird dieser Stil correctlly entfernt und wird nicht wieder aufgenommen , nur die Klasse "modal-open".

Ich weiß nicht, wie diese Klasse automatisch hinzugefügt wird. Ich habe auf einer anderen Seite auch 2 offene Modale, aber alle Modalitäten werden im Hauptfenster aufgerufen, ich habe keinen iframe. Und auf dieser Seite funktioniert es gut.

Das Problem ist mit dem modal im Iframe aufgerufen.

Ich benutze Twitter Bootstrap 3.3.7.

Ich freue mich über jede Hilfe.

EDIT 1:

Ich hatte die Info zu beheben, beacuse beiden Modalverben im Hauptfenster sind. Nur die Schaltfläche, die das erste Modal aufruft, befindet sich im Iframe.

Wenn ich das erste modale (Schaltfläche in Iframe) öffne, erhält das Body-Tag innerhalb des Iframe die Klasse "Modal-Open". Wenn ich das zweite Modal (Schaltfläche innerhalb des ersten Modals) öffne, erhält das Body-Tag des Hauptfensters die Klasse "modal-open".

Wenn ich das zweite Modal schließe, wird der Inline-Stil (padding-left) im body-Tag des Hauptfensters entfernt, aber die Klasse "modal-open" nicht. Wenn ich das erste Modal schließe, wird die Klasse "modal-open" des Body-Tags in de iframe korrekt entfernt.

Hauptfenster-Code

<!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-Code

<!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>

Quelle

2017-12-12 DR.Somar

fügen Sie Ihren Code in Ihre Frage ein. –

@ hamed-javaheri Vielen Dank für Ihren Kommentar. Ich habe den Code hinzugefügt und einige Infos korrigiert. –

Ich löste die Frage der Methode Änderung des modal zu öffnen. Vielmehr als offen mit Datenattributen in der Schaltfläche, ich bin mit JS:

Klicken Sie auf die Schaltfläche innerhalb iframe die modale

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

Damit die modale zu öffnen in der Haupt geöffnet werden Fenster Kontext und funktioniert gut.

Quelle

2017-12-12 21:01:56

Modal innerhalb eines iframe entfernt Scroll im Hauptfenster, nach anderen modalen schließen

Antwort

Verwandte Themen