web-dev-qa-db-fra.com

Comment empêcher bootstrap modal de se fermer à partir du bouton en utilisant onclick?

j'ai modal avec bouton (Enregistrer)

<button type="button" class="btn btn-success btn-sm" data-dismiss="modal" onclick="do_save()">Save
    </button>

comment empêcher la fermeture lorsque la fonction do_save() a échoué? (par exemple lorsque certaines données ne parviennent pas à valider)

javascripttwitter-bootstrapmodal-dialogtwitter-bootstrap-3
12
Kokizzu

N'utilisez pas le data-dismiss="modal" et laissez votre fonction fermer (masquer) votre modal:

<button type="button" class="btn btn-success btn-sm" onclick="do_save()">Save</button>

"

function do_save()
    {
        if(Math.floor(Math.random() * 2)==1)
        {
            console.log('success');
            $('#myModal').modal('hide');
            return;
        }   
        console.log('failure');
        return false;
    }
25
Bass Jobsen

Puisque vous utilisez quand même jQuery, essayez de ne pas avoir JavaScript/jQuery incorporé dans votre code.

$('#buttonId').on( 'click', function () {
   // either call do_save or embed the contents of do_save in here
   var myDataIsValid = true; // change to call validator function
   if (myDataIsValid) {
     $('#myModal').modal('hide');
   }
   return true; // value depends on whether you want stopPropagation or not.
});

HTML:

<button id="buttonId" type="button" class="btn btn-success btn-sm">Save</button>

Comme alternative, vous pouvez probablement empêcher la fermeture en interceptant l'événement "hide" et en renvoyant false à partir de cela.

6
vogomatix

Si vous capturez l'événement de clic à partir du bouton comme ceci:

     $('#buttonId').off('click').click(function(clickEvent){
        //enter code here
     });

vous pouvez réellement empêcher la fermeture de votre modal. Pour cela, selon votre situation, vous trouverez ces deux fonctions utiles:

     clickEvent.preventDefault();
     clickEvent.stopPropagation();

Si j'ai compris ce site (qui est en allemand) http://www.mediaevent.de/javascript/event-handler-default-verhindern.html correctement, preventDefault () arrête l'action par défaut immédiate ( comme suivre un lien). Cependant, l'événement lui-même continuera de voyager à travers le DOM et peut être "entendu" par divers écouteurs d'événement, l'un d'entre eux étant l'écouteur d'événement qui cache le modal. Pour cela, la deuxième fonction est nécessaire, ce qui arrête le voyage de l'événement à travers le DOM. Ainsi, il ne peut pas être entendu par l'auditeur masqué et la fenêtre ne sera pas fermée (masquée). Par conséquent, je suggère d'implémenter les fonctions comme ceci:

     $('#buttonId').off('click').click(function(clickEvent){
        //enter code here
      var myDataIsValid = true;
      // check if Data is valid => myDataIsValid = true or false
      if(myDataIsValid){
       //do Stuff
      }else{
       clickEvent.preventDefault();
       clickEvent.stopPropagation();
       //do other Stuff
      }
    });

Dans mon code, j'ai seulement besoin d'utiliser stopPropagation (), car mon action par défaut est souhaitée, vous pouvez donc utiliser les deux fonctions indépendamment.

note: Cette solution n'a été testée qu'avec un navigateur Firefox

3
Andrea

Si vous utilisez bootstrap 4, cela s'appelle un "fond statique" et peut être obtenu en ajoutant le data-backdrop="static" attribut

<div class="modal fade" id="modalExample" data-backdrop="static">

src: Bootstrap 4 Modal - Toile de fond statique

0
Tyson Gibby