Confirmation with Bootstrap modal

Asked

Viewed 4,260 times

0

I have a system that I’m using Bootstrap for. I would like to know if you have how in the actions to register, instead of appearing the famous phrase "Your registration was successfully made!" from Javascript Alert, appear in Bootstrap Modal.

twitter-bootstrap bootstrap-3
  • 1

    I don’t get it, this message isn’t from you?

  • The registration occurs normally, but I’m using the Javascript’s own Alert. I wish that instead of using Javascript Alert, the message would appear in the Bootstrap modal. Currently, I have to click on the link to show the Bootstrap modal, but I need that when registering, return the message in modal and not in Javascript Alert.

  • Post what you’ve tried.

  • Actually I haven’t tried anything yet, because I don’t even know where to start rs. What is ready is the registration, mysql insert, these things. But when the registration is done, the message appears in javascript. It is this message that I need to change to the Bootstrap modal.

2 answers

2

You can use to open via js:

$('#myModal').modal('show');


$(function() {
  $('#openModal').click(function() {
     $('#myModal').modal('show');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" id="openModal">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>

  • Actually your Emir code works by clicking the button.

  • I managed to get a solution right here in Stack and edited my question with the topic link.

  • 1

    Use $('#myModal'). modal('show'); to show without clicking the button. I put the button only to facilitate the example

0

I managed to fix the solution right here in Stack. If you want a similar solution, look at this Topical

    <div id="myModa3" class="modal fade" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">

Jquery:

 $(document).ready(function() {
        $('#myModa3').modal();
    });

The solution was Caio Silva’s.

Thank you all!

  • 1

    If possible, and it’s not too much to ask, add the code to the answer. It’s okay to be from another topic, just add the font and everything is solved. I know I’m being annoying, but it’s better for the community like this.

Browser other questions tagged twitter-bootstrap bootstrap-3

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