OPEN AND CLOSE MODAL POPUP

In this section we will show you how to add popup in your HTML page.

For adding modal popup in your HTML page:

1. Install and Add jquery and bootstrap file
  --> Open nuget package and search jquery and bootstrap
  --> Click on install button
  --> After installation add reference file in your page

       <script src="~/Scripts/bootstrap.min.js"></script>
       <script src="~/Scripts/bootstrap.min.js"></script>
       <script src="~/Scripts/jquery-1.10.2.min.js"></script>


2. Write following html code for modal popup in your HTML page,


<div id="modalview" class="modal">
                <div class="modal-content" style=" width: 660px; height: 590px; margin-left: 309px; margin-top: 40px;">
                    <div class="modal-header">
                        <button type="button" id="btnmodalclose" class="close">&times;</button>
                        <h6 class="modal-title">VIEW DETAILS</h6>
                    </div>
                    <div class="modal-body">
                          WELCOME
                    </div>
            </div>
        </div>
3. Then write following code in script for open modal popup window on page load and close window on button click...

$(document).ready(function(){

//For open modal popup
var modal = document.getElementById('modalview');
modal.style.display = "block";

$('#btnmodalclose').click(function () {

//For close modal popup
var modal1 = document.getElementById('modalview');
modal1.style.display = "none";
})


})