Wie man Twitter Bootstrap Modal zum Schließen bringt (nach dem ersten Start)


91

Ich bin sehr noob, also denke ich, dass ich etwas (wahrscheinlich offensichtliches) mit Twitter Bootstrap Modal beaufsichtige. Ich versuche, ein Modal nur auf Mobilgeräten zu starten. Dies funktioniert gut mit dem Hinzufügen der Klasse .visible-phone zum modalen div. So weit, ist es gut. Aber dann möchte ich, dass es funktioniert, was bedeutet, dass Sie es mit der X-Taste schließen können. Und ich kann den Knopf nicht zum Laufen bringen.

<div class="modal visible-phone" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>text introductory<br>want to navigate to...</h3>
 </div>
 <div class="modal-body">
    <ul class="nav">
      <li> ... list of links here </li>
    </ul>
   </div>
  </div>

Am Ende des HTML-Codes habe ich jquery.js (first) und bootstrap.modal.js und bootstrap.transition.js eingefügt. Eigentlich alle Bootstrap-JS-Module (um ein Include nicht zu verpassen). Ich bin nicht erfahren mit js ..

Bitte verzeihen Sie mir, wenn ich ein wirklich dummes Q gestellt habe. Ich konnte die Antwort auf diese spezielle Situation nicht im Protokoll finden.

Antworten:


219

$('#myModal').modal('hide') Sollte es tun


Ja, das funktioniert. Aber ich habe nicht die gleiche Animation, die wir mit 'data-entlassen = "modal"' haben?
Chris

ok mein fehler Eigentlich erinnere ich mich nicht an das Problem, das ich damals hatte, ich benutze es jetzt und es funktioniert perfekt. TY!
Chris


6
Das ist seltsam, $('#myModal').modal('show')funktioniert für mich, aber verstecken nicht.
Charlotte

3
@ LittleBigBot versuchen, $('#myModal').modal('toggle');stattdessen zu verwenden
Edson Horacio Junior

27

Ich hatte Probleme beim Schließen des modalen Bootstrap-Dialogfelds, wenn es geöffnet wurde mit:

$('#myModal').modal('show');

Ich habe dieses Problem gelöst, indem ich den Dialog über den folgenden Link geöffnet habe:

<a href="#myModal" data-toggle="modal">Open my dialog</a>

Vergessen Sie nicht die Initialisierung:

$('#myModal').modal({show: false});

Ich habe auch die folgenden Attribute für den Schließknopf verwendet:

data-dismiss="modal" data-target="#myModal"

Hallo artjom. Danke! Wird es ausführen und Feedback geben. Sie verwenden nicht die Taste à, um das Modal zu öffnen? Da versuche ich das zu erreichen. Lassen Sie à modal starten und nur auf Mobilgeräten, um ein schnelles Navigationsmenü zum Standort anzubieten (nicht direkt relevant, wenn Sie sich auf dem Desktop befinden), das ist die Idee.
Monique De Haas

Ja data-entlassen = "modal" data-target = "# myModal" hat mein Problem gelöst! schätzen!
Dheeraj Thedijje

13

Fügen Sie die Klasse hide zum Modal hinzu

<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >

Javascript Code

 <!-- Use this to hide the modal necessary for loading and closing the modal-->
 <script>
     $(function(){
         $('#closeModal').click(function(){
              $('#myModal').modal('hide');
          });
      });
 </script>

 <!-- Use this to load the modal necessary for loading and closing the modal-->
 <script>
     $(function () {
         $('#myModal').modal('show');
     });
  </script>

13

.modal ('hide') versteckt ein Modal manuell. Verwenden Sie den folgenden Code, um Ihr Bootstrap-Modell zu schließen

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

Schauen Sie sich hier den funktionierenden Codepen an

Oder

Versuch es hier


6

Geben Sie genau das Modal an, das die Schaltfläche mit dem Datenziel schließen soll. Ihr Button sollte also wie folgt aussehen:

<button class="close" data-dismiss="modal" data-target="#myModal">×</button>

Außerdem sollten Sie nur bootstrap.modal.js benötigen, damit Sie die anderen sicher entfernen können.

Bearbeiten: Wenn dies nicht funktioniert, entfernen Sie die Klasse für sichtbare Telefone und testen Sie sie in Ihrem PC-Browser anstelle des Telefons. Dies zeigt an, ob Sie Javascript-Fehler erhalten oder ob es sich beispielsweise um ein Kompatibilitätsproblem handelt.

Bearbeiten: Demo-Code

<html>
<head>
    <title>Test</title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        if( navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
          ) {
          $("#myModal").modal("show");
        }

        $("#myModalClose").click(function () {
          $("#myModal").modal("hide");
        });
      });
    </script>
</head>
<body>
    <div class="modal hide" id="myModal">
      <div class="modal-header">
        <a class="close" id="myModalClose">×</a>
        <h3>text introductory<br>want to navigate to...</h3>
     </div>
     <div class="modal-body">
        <ul class="nav">
          <li> ... list of links here </li>
        </ul>
   </div>
  </div>
</body>
</html>

Hallo @ Simon Cunningham Tnx eine Million für die Beantwortung! Ich habe das Datenziel eingegeben. Hat (leider) nicht funktioniert Dann habe ich die Klasse der sichtbaren Telefone entfernt. Hat keinen Unterschied gemacht. code <div class = "modales sichtbares Telefon" id = "myModal"> <div class = "modaler Header"> <button class = "schließen" data-Entlassung = "modal" data-target = "# myModal"> × </ button> <h3> Einführung in den Text <br> möchte navigieren zu ... </ h3> </ div> <div class = "modal-body"> <ul class = "nav"> <li> .. Liste der Links hier </ li> <li> Link2 </ li> <li> Link3 </ li> </ ul> </ div> </ div>code

<div class="modal visible-phone" id="myModal"> <div class="modal-header"> <button class="close" data-dismiss="modal" data-target="#myModal">×</button> <h3>text introductory<br>want to navigate to...</h3> </div> <div class="modal-body"> <ul class="nav"> <li> ... list of links here </li> <li> link2 </li> <li> link3 </li> </ul> </div> </div>
Monique De Haas

Entschuldigung für den Text da oben;) Ich bin deinem Rat gefolgt. Scheint logisch, der Schaltfläche zum Schließen ein genaues Datenziel zu geben. Aber irgendwie bekomme ich es immer noch nicht zum Laufen. Auch wenn das sichtbare Telefon deaktiviert ist. Scheint den Schließen-Button nicht zu beeinflussen. (was irgendwie gut ist)
Monique De Haas

Wie öffnen Sie zunächst Ihr Modal? Versuchen Sie es wie folgt zu öffnen - <a data-toggle="modal" href="#myModal" class="btn"> Modal öffnen </a>
Simon Cunningham

Ich habe meiner ursprünglichen Antwort einen reduzierten Demo-Code hinzugefügt. Die Javascript- und CSS-Dateien sind lokal für mein Testprojekt. Ersetzen Sie sie einfach durch Links zu Ihren eigenen.
Simon Cunningham

6

Laut Dokumentation sollte das Verstecken funktionieren. Aber das tut es nicht.

Hier ist, wie ich es gemacht habe

$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body

1
Dies ist eigentlich die richtige "Brute Force" -Antwort. Aber ich schlage vor, sie neu zu schreiben, um die Animation korrekt zu erhalten:$("#modal-id").modal("toggle"); $(".modal-backdrop").fadeOut('fast',function(){ $("body").removeClass( "modal-open" ); $(".modal-backdrop").remove(); });
DerDu

3

Probieren Sie das an ..

$('body').removeClass('modal-open');

$('.modal-backdrop').remove();

1

Ich hatte das gleiche Problem auf dem iPhone oder Desktop und konnte den Dialog beim Drücken der Schaltfläche "Schließen" nicht schließen.

Ich fand heraus, dass das <button>Tag eine anklickbare Schaltfläche definiert und benötigt wird, um das Typattribut für ein Element wie folgt anzugeben:

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

Überprüfen Sie den Beispielcode für Bootstrap-Modalitäten unter: BootStrap-Javascript-Seite


0

Wenn Sie gleichzeitig gezeigt wenig modal haben , können Sie Ziel modal für in-modale Schaltfläche mit Attributen angeben data-toggleund data-target:

<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm">
           <div class="modal-content">
                <div class="modal-header text-center">
                     <h4 class="modal-title">Modal Title</h4>
                     <small>Modal Subtitle</small>
                </div>
                <div class="modal-body">
                     <p>Modal content text</p>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button>
                     <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button>
                </div>
           </div>
      </div>
 </div>

Irgendwo außerhalb des Modalcodes können Sie eine andere Umschalttaste haben:

<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>

Der Benutzer kann nicht auf die Schaltfläche zum Umschalten im Modal klicken, solange diese Schaltfläche ausgeblendet ist, und es funktioniert korrekt mit der Option "modal"für das Attribut data-toggle. Dieses Schema funktioniert automatisch!


0

Hier ist ein Snippet, mit dem Sie nicht nur Modals ohne Seitenaktualisierung schließen, sondern bei Drücken der Eingabetaste Modal senden und ohne Aktualisierung schließen können

Ich habe es auf meiner Site eingerichtet, wo ich mehrere Modals haben kann und einige Modals Daten beim Senden verarbeiten und andere nicht. Ich erstelle eine eindeutige ID für jedes Modal, das die Verarbeitung durchführt. Zum Beispiel auf meiner Webseite:

HTML (modale Fußzeile):

 <div class="modal-footer form-footer"><br>
              <span class="caption">
                <button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart&nbsp; <i class="fa fa-shopping-cart"></i></button>     
                <button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel&nbsp; <i class="fa fa-close"></i></a>
              </span>
      </div>

jQUERY:

$(document).ready(function(){
// Allow enter key to trigger preloadorders form
    $(document).keypress(function(e) {       
      if(e.which == 13) {   
          e.preventDefault();   
                if($(".trigger").is(".ok")) 
                   $("#PreLoadOrders").trigger("click");
                else
                    return;
      }
    });
});

Wie Sie sehen können, führt diese Übermittlung die Verarbeitung durch, weshalb ich diese jQuery für dieses Modal habe. Nehmen wir nun an, ich habe ein anderes Modal auf dieser Webseite, aber es wird keine Verarbeitung durchgeführt. Da jeweils ein Modal geöffnet ist, $(document).ready()füge ich ein anderes in ein globales PHP / JS-Skript ein, das alle Seiten erhalten, und gebe der Schaltfläche zum Schließen des Modals eine Klasse mit dem Namen:".modal-close" :

HTML:

<div class="modal-footer caption">
                <button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

jQuery (einschließlich global.inc):

  $(document).ready(function(){
         // Allow enter key to trigger a particular button anywhere on page
        $(document).keypress(function(e) {
                if(e.which == 13) {
                   if($(".modal").is(":visible")){   
                        $(".modal:visible").find(".modal-close").trigger('click');
                    }
                }
         });
    });
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.