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

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.

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

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"

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>

.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

$(function () {
    $(".custom-close").on('click', function() {
        $('#myModal').modal('hide');
    });
});

<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
          
          <a class="custom-close"> My Custom Close Link </a>
          
          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

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>

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

Probieren Sie das an ..

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

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

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

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!

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');
                    }
                }
         });
    });