Wie man das Modal schließt, wenn man draußen klickt

Lesezeit: 7 Minuten

Benutzeravatar von Jack H
Jack H

Ich habe dieses JavaScript unten verwendet:

$('body').click(function() {
  if (!$(this.target).is('#popUpForm')) {
    $(".modalDialog").hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="openModal" class="modalDialog">
    <div class="modalClose">
      <a href="#close" title="Close" class="close-circle" style="color:white; text-decoration:none; font-size:14px;"></a>
      <div id="signup-header">
        <h4>Request a brochure, with a free demo</h4>
        <h5>Please Fill in the form below: </h5>
      </div>

      <form id="popUpForm" class="tryMeForm" name="" onsubmit="return formCheck(this);" method="post" action="">
        <div class="InputGroup">
          <input type="text" name="name" id="name" value="" placeholder="First Name*" />
        </div>
        <div class="InputGroup">
          <input type="text" name="lastname" id="lastname" value="" placeholder="Last Name*" />
        </div>
        <div class="InputGroup">
          <input type="text" name="Email" id="Email" value="" placeholder="Email Address*" />
        </div>
        <div class="InputGroup">
          <input type="text" name="Phone" id="Phone" value="" placeholder="Phone Number*" />
        </div>
        <div class="InputGroup">
          <textarea name="message" id="message" class="" placeholder="How we can help?"></textarea>
        </div>
        <div class="submit">
          <input class="button_submit1 button-primary button1" type="submit" value="Submit" />
        </div>

      </form>
    </div>
  </div>
</body>

Dadurch kann ich das Modal schließen, wenn ich außerhalb davon klicke. Es schließt sich jedoch auch, wenn ich hineinklicke. Wie kann ich es nur außen und den Schließen-Button schließen lassen, aber nicht innen, damit die Benutzer trotzdem ihre Daten eingeben können?

  • Sie müssen den übergeordneten Knoten überprüfen

    – Ryan

    1. Juni 2016 um 16:02 Uhr

Benutzeravatar von Zakaria Acharki
Zakaria Acharki

Verwenden Sie den übergeordneten Knoten #openModal (Behälter) statt #popUpForm (bilden) :

$('body').click(function (event) 
{
   if(!$(event.target).closest('#openModal').length && !$(event.target).is('#openModal')) {
     $(".modalDialog").hide();
   }     
});

  • Dies funktioniert, wenn die Länge der Kinder von element #openModal ist genau einer. Es ist tatsächlich etwas komplizierter, als nur das zu überprüfen e.target

    – Ryan

    1. Juni 2016 um 16:20 Uhr


  • Danke @self für deine Intervention, die du verwenden könntest closest() um den Teil der Kinder / Eltern abzudecken … (Aktualisierung meiner Antwort).

    – Zakaria Acharki

    1. Juni 2016 um 17:15 Uhr


  • Ich fand heraus, dass das von mir verwendete Modal-Plugin, das von einer Kartoffel entwickelt wurde, verwendet wurde e.stopPropagation() um dasselbe Ziel zu erreichen, was unweigerlich verhinderte, dass Ereignisse für irgendetwas innerhalb des Modals ausgelöst wurden! Ich habe Ihre Lösung verwendet, um zu beheben, was die Kartoffel codiert hat.

    – Martin Jakob

    4. Juli 2018 um 15:45 Uhr

Ergänzend für zukünftige Leser.

Eine andere Möglichkeit, das Modal beim Klicken nach außen zu schließen, bestand darin, die sprudelnde Natur der Javascript-Ereignisse auszunutzen.

In einer typischen modalen HTML-Struktur

<body>
  <div id="root">
    -- Site content here
  </div>
  <div id="modal-root">
    <div class="modal"></div>
  </div>
</body>

anklicken .modal bewirkt, dass sich das Klickereignis wie folgt ausbreitet .modal -> #modal-root -> body Wenn Sie außerhalb des Modals klicken, wird es nur durchlaufen #modal-root -> body.

Da wir die Weitergabe von Klickereignissen vollständig stoppen können und dies keinen anderen Code stört, müssen wir nur in beiden auf Klickereignisse lauschen .modal und #modal-root. Ein „Modal-Root“-Klick schließt das Modal, und ein „Modal“-Klick stoppt die Weitergabe des Click-Ereignisses, sodass der „Modal-Root“ nie erreicht wird.

Für zusätzliche Klarheit ist hier der Code, der in codepen.io funktioniert: https://codepen.io/nbalaguer/pen/PVbEjm

  • Es ist ein netter Ansatz, obwohl die Dinge kompliziert werden, wenn Sie einige anklickbare Elemente im Modell haben (Schaltfläche „Senden“, Link zu den Allgemeinen Geschäftsbedingungen usw.).

    – Kut

    23. August 2019 um 13:00 Uhr

  • @Kout es funktioniert immer noch, weil Klicks auf innere Elemente nicht beeinflusst werden, wenn Sie Ihren Zuhörer auf das Element selbst platzieren.

    – mjsarfatti

    21. September 2019 um 21:37 Uhr

  • Nett, aber es behandelt die folgenden Fälle nicht: – Maus unten auf der Außenseite und Maus oben auf dem Modal sollte nicht schließen – Maus unten auf dem Modal und Maus oben auf der Außenseite sollte nicht schließen

    – Ybri

    6. Juli 2021 um 15:00 Uhr


Das funktioniert bei mir: Ich habe ein Bild innerhalb des modalen Fensters, also wenn jemand außerhalb des Bildes klickt (zentriert):

HTML Quelltext:

<div id="modal_div"><img id="image_in_modal_div" src="https://stackoverflow.com/questions/37573608/image.jpg" /></div>

CCS-Code:

#modal_div {
        display: none;
          position: fixed; 
        z-index: 1; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
          background-color: transparent;
}

#image_in_modal_div {
       left: 50%;
       top: 30%;
       position: absolute;
}

gemischter JQuery- und Javascript-Code:

$( document ).ready(function() {

    $("#element_that_opens_modal").click(function(){
        $("#modal_div").show();
    });

    window.onclick = function(event) {
       if (event.target.id != "image_in_modal_div") {
          $("#modal_div").hide();
       }
    }

});

Dies schien der Code zu sein, der am Ende für mich funktioniert hat:

$(document).click(function (e) {
    if ($(e.target).is('#openModal')) {
        $('#openModal').fadeOut(500);
    }

});

$("#modalNo").click(function () {
    $("#openModal").fadeOut(500);


});
$(".close").click(function () {
    $("#openModal").fadeOut(500);
});
$(".close-circle").click(function () {
    $("#openModal").fadeOut(500);
});

Benutzeravatar von Usman Mahmood
Usman Mahmood

Einfach:

var images_modal = document.getElementById('images-model-div');

var videos_modal = document.getElementById('video-model-div');

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

   if (event.target == images_modal) {

      images_modal.style.display = "none";

    }

    if (event.target == videos_modal) {

      videos_modal.style.display = "none";

    }

}

Ryans Benutzeravatar
Ryan

Dies ist nicht der effizienteste Weg, aber es wird funktionieren. Die Idee ist, den Baum zu durchqueren und zu prüfen, ob das übergeordnete Element die ID desjenigen ist, bei dem Sie sich beim Klicken nirgendwo außer ihm verstecken möchten.

$(document).on('click', function(e) {    
    var p = e.target;
    while(p) {
        console.log(p);
        if(p.id) {
            if(p.id == 'openModal') {
                return;
            }
        }
        p = p.parentElement;
    }
    $("#openModal").hide();
});

Abdullahs Benutzeravatar
Abdullah

$('body').on('click', '.modal-open', function(e) {
    
    $('.modal-background, .modal').show();
    e.preventDefault();
})
.on('click', '.modal-close', function(e) {
    
    $('.modal-background, .modal').hide();
    e.preventDefault();
});

if ( !$('.modal-background.modal-close').length ) {
    $('<div/>').addClass('modal-background modal-close').appendTo('body');
}
body {
    background: #ccc;
    overflow-y: scroll;
    padding: 15px;
}

button {
    cursor: pointer;
}

.modal {
    width: 400px;
    margin: 5% auto 0 -200px;
    padding: 10px;
    background: #eee;
    display: none;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 10;
}

.modal-background {
    background: rgba(0, 0, 0, 0.5);
    /* background: transparent; */
    /* position: absolute; */
    position: fixed;
    z-index: 9; /* .modal[zIndex] - 1 */
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    display: none;
}
<p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<button type="button" class="modal-open">Open modal</button>

<div class="modal">
    <p>
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </p>
    <p>
        <button type="button" onclick="$('.dummy-container').toggle()">Toggle something for testing</button>
    <p>
    <p class="dummy-container" style="display: none;">
        Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </p>
    <p>
        <button type="button" class="modal-close">Close modal</button>
    </p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1435760cookie-checkWie man das Modal schließt, wenn man draußen klickt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy