web-dev-qa-db-fra.com

empêcher la fermeture de la fenêtre modale d'amorçage lors de la soumission du formulaire

Bonjour, j'utilise Bootstrap pour la première fois et je ne parviens pas à laisser mon formulaire modal ouvert en cliquant sur le bouton d'envoi. J'ai effectué une recherche SO mais toutes les questions connexes traitent de questions légèrement différentes (exemple ci-dessous).

Interdit la fermeture de la fenêtre modale d'amorçage Twitter

javascriptcsstwitter-bootstrapmodal-dialog
12
U r s u s

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

utilisation

data-backdrop="static"

ou

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

Edit1:

sur votre lien ouvrant votre modal ==> 

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

Edit2:

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

10
ZooL

Supprimer les éléments suivants:

data-dismiss = "modal"

À partir du bouton qui ne devrait pas fermer la boîte de dialogue. Après cela, vous pouvez fermer la boîte de dialogue en utilisant $ ("#TheDialogID") .modal ("hide"). Exemple:

<!--<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>-->

Code Javascript:

//#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

C’est ce que j’ai fait dans mon programme, espérons que cela aide.

C'est le bouton qui déclenche le modal. Ici, j'ai désactivé le clavier et la souris en dehors du modal.

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

C'est la division modale, avec un formulaire et un bouton d'envoi. Remplacez ... par votre contenu modal.

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

Enfin, la fonction qui se déclenche lorsque vous cliquez sur le bouton Soumettre. Ici, event.preventDefault(); empêchera l'action par défaut de soumission du formulaire, de sorte que le modal reste.

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

Si vous voulez ajouter plusieurs données et que vous voulez que modal reste ouvert, utilisez

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

et Si vous souhaitez fermer le modal après la soumission des données, vous devez utiliser

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

Utilisez ceci pour empêcher la fenêtre modale d'amorçage de se fermer lors de la soumission du formulaire

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

utiliser seulement le code ci-dessous: -

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

});

et écrivez votre code html dans le panneau de mise à jour, puis supprimez data-rejet = "modal" du bouton. J'espère que ça marche pour toi.

0
inżynier umair