Open Bootstrap Model with own function

Question

I have an asp.net web application. When I click on my button a modal should be opened this is my button:

<input type="button" class="mybutton" data-toggle="modal"     data-target="#mymodal" value="Open Model" /> 

This works fine but I would prefer to to it like that:

<input type="button" class="mybutton" onclick="showModal()" value="Open Model" /> 

with:

function showModal() {
      $('#mymodal').toggle();
  }

but when I do it that way and click on the button the modal doesn´t show up and it is like the whole page freezes. But I don´t get any error warnings. If anyone has an idea I would really appriciate.

Answer 1

See Bootstrap docs for modal methods.

function showModal() {
  $('#myModal').modal('show');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<input type="button" class="mybutton btn btn-primary" onclick="showModal()" value="Open Model" /> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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="exampleModalLabel">Modal</h4>
      </div>
      <div class="modal-body">
        Modal content
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

You also have other methods to interact with modal, for example:

$('#myModal').modal('toggle'); // Show if closed, close if shown
$('#myModal').modal('show'); // Show modal
$('#myModal').modal('hide'); // Hide modal

Answer 2

you can use any of the below.

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

You can see more here: modal