Is it possible to call a modal without a click?

Asked

Viewed 5,715 times

3

Good morning guys, it’s my first post, so I’m sorry if anything’s wrong. I wonder if it is possible to call a modal without clicking on a button, for example I would like to replace the php Alert('Message'); by a modal. Give an inserted message successfully, recorded successfully or error !!

E.g. this modal:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" 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>

</div>

</body>
</html>
bootstrap-3

  • Yes it is.. <script> $(Document). ready(Function(){ $("#myModal"). modal(); }); </script>

  • In this case you just make a condition of if, ai calls

2 answers

3

You can do it this way:

<?php if($acao=="sucesso"){ ?>
    <script>
        $(document).ready(function(){
            $("#myModal").modal();
        });
    </script>
<? } ?>

<div id="myModal">teste</div>

In this case, if there is any successful action, as per your condition, will call the modal automatically. If I understand correctly, this is it!

0

Not to complicate too much, I would do as follows: Simulate a button click event that opens the modal to trigger the modal opening.

There may be a better way to do it in bootstrap, but if you want to open the modal either by clicking on the button or by another event, it is valid to do this, not to repeat code.

$(function () {

      $('#open-modal').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button id="open-modal" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" 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>
  
</div>

</body>
</html>

Simplifying the code, I added a id to the button that opens the modal and used a trigger to trigger the event linked to the button click.

Browser other questions tagged bootstrap-3

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