wake-up-neo.net

Schließen Sie Bootstrap Modal

Ich habe ein Bootstrap-Modal-Dialogfeld, das ich zunächst anzeigen möchte. Wenn der Benutzer auf die Seite klickt, wird sie ausgeblendet. Ich habe folgendes:

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

Das Modal wird anfänglich angezeigt, aber es wird nicht geschlossen, wenn es außerhalb des Modals angeklickt wird. Außerdem ist der Inhaltsbereich nicht ausgegraut. Wie kann ich das Modal zunächst anzeigen und schließen, nachdem der Benutzer außerhalb des Bereichs geklickt hat? Und wie kann ich den Hintergrund wie in der Demo ausgegraut darstellen?

355
Nick B

Setzen Sie modal('toggle') anstelle von modal(toggle)

$(function () {
   $('#modal').modal('toggle');
});
572
Tamil Selvan C

zum Schließen von bootstrap modal können Sie 'hide' als Option an die modale Methode übergeben, wie folgt

$('#modal').modal('hide');

Bitte schauen Sie sich das Arbeiten an fiddle here

bootstrap stellt auch Ereignisse bereit, die Sie in die Funktionalität von modal einbinden können, z. B. wenn Sie ein Ereignis auslösen möchten, wenn der Modal nicht mehr für den Benutzer sichtbar ist. Sie können hidden.bs.modal event verwenden Weitere Informationen über modale Methoden und Ereignisse finden Sie hier in Documentation

Wenn keine der oben genannten Methoden funktioniert, geben Sie der Schließen-Schaltfläche eine ID, und klicken Sie auf die Schließen-Schaltfläche.

344
Subodh Ghulaxe
$('#modal').modal('toggle'); 

oder 

$('#modal').modal().hide();

sollte arbeiten.

Wenn nichts anderes funktioniert, können Sie die modale Schließen-Schaltfläche direkt aufrufen:

$("#modal .close").click()
59
Robert Benyi

das hat für mich funktioniert:

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

verwenden Sie diesen Link modal close

27
santhosh
$("#your-modal-id").modal('hide');

Das Ausführen dieses Aufrufs über die Klasse ($(".my-modal")) funktioniert nicht.

16
Yishai Landau

dieses ist ziemlich gut und es funktioniert auch in eckig 2 

$("#modal .close").click()
10
user3869304

Meine fünf Cents bei diesem Punkt sind, dass ich nicht mit einer id auf den Bootstrap-Modal zielen möchte. Da es nur jeweils einen Modal geben sollte, sollte das Folgende ausreichend sein, um den Modal zu entfernen, da Toggle gefährlich sein kann :

$('.modal').removeClass('show');
7

In einigen Fällen kann ein Tippfehler die Ursache sein. Stellen Sie beispielsweise sicher, dass Sie Folgendes haben:

data-dismiss="modal"

und nicht 

data-dissmiss="modal"

Beachten Sie das doppelte "ss" im zweiten Beispiel, bei dem die Schaltfläche "Schließen" fehlschlägt.

7
zinczinc

Wir können das modale Pop-Up auf folgende Weise schließen:

// We use data-dismiss property of modal-up in html to close the modal-up,such as

<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>

 // We can close the modal pop-up through Java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.
6
   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };
5
Sheladiya Ajay

Versuchen Sie dies

$('#modal_id').modal('hide');
5
Love Kumar

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
      $('#myModal').modal('show');
});
$(function () {
   $('#modal').modal('toggle');
});
</script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

4
Ganesh Putta

$('.modal.in').modal('hide');

verwenden Sie den obigen Code, um den Modal-Hintergrund auszublenden, wenn Sie mehrere Modal-Popups auf einer Seite verwenden.

4
sher bahadur

sie können verwenden;

$('#' + $('.modal.show').attr('id')).modal('hide');
4
Fatih Turan

Bei Verwendung von modal.hide wird nur das Modal ausgeblendet. Wenn Sie Overlay unter dem Modal verwenden, ist es immer noch vorhanden. Verwenden Sie den Click-Aufruf, um das Modal zu schließen und die Überlagerung zu entfernen.

$("#modalID .close").click()
3
Vikalp Veer

Eine andere Möglichkeit, dies zu tun, besteht darin, dass Sie zuerst die Klasse modal-open entfernen, wodurch die modal geschlossen wird. Dann entfernen Sie den Klassen-Modal-Hintergrund, der die gräuliche Abdeckung des Modals entfernt. 

Folgender Code kann verwendet werden:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()  
3
Orozcorp

Dieser Code hat perfekt zum Schließen eines Modals (ich benutze Bootstrap 3.3)

$('#myModal').removeClass('in')
2
user3870075

In meinem Fall begann die Hauptseite, von der aus Bootstrap-Modal ausgelöst wurde, nach der Verwendung von $("#modal").modal('toggle'); way nicht mehr zu reagieren, jedoch auf folgende Weise:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});
2
Awais Nasir

Ich habe programmatisch mit diesem Trick geschlossen

Fügen Sie eine Schaltfläche in modal mit data-dismiss="modal" hinzu und blenden Sie die Schaltfläche mit display: none aus. So wird es aussehen

<div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

Nun, wenn Sie modal programmgesteuert schließen möchten, einfach ein Klickereignis auslösen auf dieser Schaltfläche, die für Benutzer nicht sichtbar ist

In Javascript können Sie den Button wie folgt auslösen:

document.getElementById('close-modal').click();
2
Zohab Ali

Außerdem können Sie auf ein 'x' "klicken", um den Dialog zu schließen. Z.B.:

$(".ui-dialog-titlebar-close").click();

1
slashka

In meinem Fall habe ich eine Schaltfläche verwendet, um die Modalität anzuzeigen 

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

Um also in meinem Code das Modal zu schließen (das hat die id = 'my-modal-to-show'), nenne ich diese Funktion (in Angular TypeScript):

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

Wenn ich $ (modalId) .modal ('hide') anrufe, funktioniert es nicht und ich weiß nicht warum

PS .: in meinem Modal habe ich dieses Button-Element auch mit der .close-Klasse codiert 

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>

Das funktioniert gut

$(function () {
   $('#modal').modal('toggle');
});

Wenn Sie jedoch mehrere Modale übereinander stapeln, ist dies nicht effektiv. Stattdessen funktioniert dies

data-dismiss="modal"
0
Edgar256