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.
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" 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">×</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
you can use any of the below.
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
You can see more here: modal
