1

I have the following JQUery function

 $('button.forward').click(function() {

    });

where once the button forward - below is the code for the button - is clicked, a modal should appear as such

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
1

3 Answers 3

2

Add that HTML code at the end of your page (inside the body tag) and add the following to your jQuery:

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

See the Bootstrap JavaScript reference for more details.

5
  • thank you. I have applied the code, but my main concern is that the dialog modal quickly dissapears upoin click, below is code $('button.forward').click(function() { $("#myModal2").modal("show"); });
    – user4458396
    Jan 31, 2015 at 18:19
  • What do you mean by this? Are you saying it flashes up for a second then disappears again?
    – MTCoster
    Jan 31, 2015 at 18:23
  • yes precisely that exactly what occurs
    – user4458396
    Jan 31, 2015 at 19:07
  • 1
    Hmm I have no idea what would cause that behaviour...
    – MTCoster
    Jan 31, 2015 at 20:03
  • thank you. my problem has slightly increased and have reposted it there stackoverflow.com/questions/28349522/…
    – user4458396
    Feb 5, 2015 at 16:50
0
 $('button.forward').click(function() {
    $("#myModal").modal("show");
 });
1
  • thank you. I have applied the code, but my main concern is that the dialog modal quickly dissapears (flashes up for a second then disappears) upon click, below is code $('button.forward').click(function() { $("#myModal2").modal("show"); })
    – user4458396
    Jan 31, 2015 at 19:08
0
$('button.forward').click(function() {
        $("#modal-body").show();
    });

if you want the modal-body to be hidden by default use this code :

<script>
$(document).ready(function(){
 $("#modal-body").hide();
  $('button.forward').click(function() {
            $("#modal-body").show();
        });
});
</script>