it-swarm.com.de

verhindern, dass das modifizierte Bootstrap-Fenster bei der Formularübergabe geschlossen wird

Hallo, ich verwende Bootstrap zum ersten Mal und ich kann mein modales Formular nicht erhalten, wenn Sie auf die Schaltfläche "Senden" klicken. Ich habe SO gesucht, aber alle verwandten Fragen behandeln etwas andere Probleme (Beispiel unten).

Twitter-Bootstrap-Modalfenster nicht schließen

12
U r s u s

siehe => http://getbootstrap.com/2.3.2/javascript.html#modals

benutzen

data-backdrop="static"

oder

$("#yourModal").modal({"backdrop": "static"});

Edit1:

auf Ihrem Link öffnen Sie Ihr Modal ==> 

<a href="#" onclick="$('#yourModal').modal({'backdrop': 'static'});" class="btn btn-primary">yourModal</a>

Edit2:

http://jsfiddle.net/BVmUL/39/

10
ZooL

Entfernen Sie Folgendes:

data-dismiss = "modal"

Über die Schaltfläche sollte der Dialog nicht geschlossen werden. Danach können Sie den Dialog mit $ ("#TheDialogID") .modal ("hide") schließen. Beispiel:

<!--<SimpleModalBox>-->
<div class="modal fade" id="SimpleModalBox" tabindex="-1" role="dialog" aria-labelledby="SimpleModalLabel" aria-hidden="true">
  <!--<modal-dialog>-->
  <div class = "modal-dialog">

    <!--<modal-content>-->
    <div class = "modal-content">

      <div class = "modal-header">
        <button type = "button" class = "close" data-dismiss = "modal">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class = "modal-title" id = "SimpleModalLabel">Title for a simple modal</h4>
      </div>

      <div id="TheBodyContent" class = "modal-body">
        Put your content here
      </div>

      <div class = "modal-footer">
        <button type = "button" class = "btn btn-default" data-dismiss = "modal">Yes</button>
        <button type = "button" class = "btn btn-default" onclick="doSomethingBeforeClosing()">Don't close</button>
        <button type = "button" class = "btn btn-default" data-dismiss = "modal">Cancel</button>
      </div>

    </div>
    <!--<modal-content>-->

  </div>
  <!--/modal-dialog>-->
</div>
<!--</SimpleModalBox>-->

Javascript-Code:

//#region Dialogs
function showSimpleDialog() {
  $( "#SimpleModalBox" ).modal();
}

function doSomethingBeforeClosing() {
  //Do something. For example, display a result:
  $( "#TheBodyContent" ).text( "Operation completed successfully" );

  //Close dialog in 3 seconds:
  setTimeout( function() { $( "#SimpleModalBox" ).modal( "hide" ) }, 3000 );
}
//#endregion Dialogs
12
Jelgab

So habe ich es in meinem Programm gemacht, hoffe es hilft.

Dies ist die Schaltfläche, die den Modal auslöst. Hier habe ich die Tastatur und den Mausklick außerhalb des Modals deaktiviert.

<button type="button" data-toggle="modal" data-target="#modalDivId"
                data-backdrop="static" data-keyboard="false">

Dies ist das modale div mit einem Formular und einer Schaltfläche zum Senden. Ersetzen Sie ... durch Ihren modalen Inhalt.

<div class="modal fade" id="modalDivId" role="dialog">
 <form>
   ...
  <button type="submit" onClick="myFunction()" class="btn btn-success">
     Submit
  </button>
 </form>
</div>

Schließlich die Funktion, die ausgelöst wird, wenn Sie auf die Schaltfläche "Senden" klicken. Hier verhindert event.preventDefault(); die Standardaktion von Formular absenden, so dass die Modalität erhalten bleibt.

function myFunction() {
    $("form").on("submit", function (event) {
        event.preventDefault();
        $.ajax({
            url: "yoururl",
            type: "POST",
            data: yourData,
            success: function (result) {
                console.log(result)
            }
        });
    })
}

Wenn Sie mehrere Daten hinzufügen möchten und modal geöffnet bleiben möchten, verwenden Sie diese Option

  • <button type="button"></button>

und wenn Sie das Modal nach dem Senden der Daten schließen möchten, müssen Sie es verwenden

  • <button type="submit"></button>
2
Gadhia Reema

Ich bin auf ein ähnliches Problem gestoßen, bei dem ich Modal als Formular verwende, sodass ich data-backdrop="static" data-keyboard="false" weil ich möchte, dass der Benutzer es schließen kann, solange er das Formular nicht abgeschickt hat. Sobald er das Formular eingereicht hat, möchte ich ihn daran hindern, das Formular modal zu schließen. Hier ist, wie ich mich fortbewegen kann.

$('#modalForm').on('submit', function() {
  $(#modal).on('hide.bs.modal', function ( e ) {
    e.preventDefault();
  }) 
});
0
nnattawat

Verwenden Sie dies, um zu verhindern, dass das modifizierte Bootstrap-Fenster bei der Formularübergabe geschlossen wird

$( "form" ).submit(function( event ) {
  event.preventDefault();
});
0
Rajiv Sharma

verwenden Sie nur den folgenden Code: -

enter $(document).ready(function () {
$("#myModal").modal('show');

});

und schreiben Sie Ihren HTML-Code in das Update-Panel und entfernen Sie dann data-dismiss = "modal" von der Schaltfläche. Ich hoffe es funktioniert für Sie.

0
inżynier umair