<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>open modal popup using jquery on button click</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function () {
$("#btnShow").click(function () {
$('#SampleModal').modal('show');
});
});
</script>
</head>
<body>
<div style="text-align:center; margin-top:10%">
<button id="btnShow" class="btn btn-success">Show Modal Popup</button>
</div>
<div class="modal fade" id="SampleModal" 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal Popup</h4>
</div>
<div class="modal-body">Welcome to Modal Popup</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</button>
</div>
</div>
</div>
</div>
</body>
</html>