When I click on a button a popup opens so I want when the popup modal opens, background page gets blurred.
<div class="modal" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body" style="max-height:500px;">
<div class="panel-title text-center" style="width: 99%; padding: 1%;">
<h1 class="title">Titels</h1>
<hr style="border: 2px solid;"/>
</div>
<div class="table100 ver1 m-b-110">
<div class="table100-body js-pscroll">
<table id="Table" class="display" style="width:100%">
<thead>
<tr class="row100 head">
<th style="text-align: center" class="cell100 column1">id</th>
<th style="text-align: center" class="cell100 column1">name</th>
<th style="text-align: center" class="cell100 column1">sname</th>
<th style="text-align: center" class="cell100 column1">dname</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
This is my popup modal code but I don't know how to to make the background blur when this opens.