Open Bootstrap Model with own function

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" value="Open Model" /> 

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

<input type="button" 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.

2 Answers

See Bootstrap docs for modal methods.

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

<script src=""></script> <script src="//"></script> <link href="//" rel="stylesheet"/> <input type="button" onclick="showModal()" value="Open Model" /> <div tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4>Modal</h4> </div> <div> Modal content </div> <div> <button type="button">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 

you can use any of the below.

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

You can see more here: modal