How to prevent a modal from appearing?

Asked

Viewed 142 times

0

Is it possible to prevent a modal from appearing if a certain condition is reached? Example of what I want, more or less:

<button id="abreModal" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal">Open Modal</button>

//aí no js...
$('#abreModal').click(function () {
   if(condicao){
        // ... previne modal de abrir
   }
});

I know that if I take the data-toggle and the data-target and show the modal manually, I can. But I have a lot of buttons like that, and I wouldn’t want to have to trade them all.

javascript jquery bootstrap-3

2 answers

2


If the click event opens the modal is very simple to do is just do so:

$('.btn').click(function () {
   if(condicao){
        return false;
   }
   // Seu código para abrir o modal.
});

So if the condition is true it will do nothing, you can put an Alert for example on top of the 'Return false' to send a message to the user.

Example: https://jsfiddle.net/bnLy8uvf/

  • For that, I would have to remove all the data-toggle and data-target of the buttons and show the modal manually, as I said in the question, I have several buttons, and I did not want to make this change at all. I wonder if there is a way to simply prevent the modal from being shown

  • How do you open the modal?

  • I do not make any JS code to open. Only having the attributes in the buttons the modal opens alone with the click.

  • If your buttons are with btn class and you put your condition and ruturn false will work

  • No, the return false; is not enough, I’ve tested

  • I did this example and it worked see: https://jsfiddle.net/bnLy8uvf/

  • Interestingly, it works, but I switched the handler to $(document).delegate and stopped working, see: https://jsfiddle.net/bnLy8uvf/1/

  • "As of jQuery 3.0, . delegate() has been deprecated" this function is deprecated for version 3, and I am using version 3 in this example, remembering that, you cannot use the same id on different elements so you must use for multiple buttons a class.

  • Yes, yes, this was just an example, but you’re right

Show 4 more comments

1

There is an option using the bootstrap events themselves, not so feasible, but to adapt: 

$('.modal').on('shown.bs.modal',function(e){
   var button = $(e.relatedTarget);
   var target = button.data('target')
   //condição
   var i = 4;
   //if
   if(i > 2){
       $(target).modal('toggle')
   }
})
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Browser other questions tagged javascript jquery bootstrap-3

You are not signed in. Login or sign up in order to post.