Try this
<div>
<asp:button id="btn_open" runat="server" text="Show Gridview" cssclass="openModal" xmlns:asp="#unknown" />
<div class="modal">
<div class="modal-header">
<h3>Student Details <a class="close-modal" href="#">×</a></h3>
</div>
<div class="modal-body">
<uc2:tabemployee id="Mine" runat="server" xmlns:uc2="#unknown"></uc2:tabemployee>
</div>
<div class="modal-footer">
<asp:button id="btn_close" runat="server" text="OK" cssclass="modalOK close-modal" xmlns:asp="#unknown" />
</div>
</div>
<div class="modal-backdrop"></div>
</div>
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.61);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
}
.modal {
width: 500px;
position: absolute;
top: 25%;
z-index: 1020;
background-color: #FFF;
border-radius: 6px;
display: none;
}
.modal-header {
background-color: #333;
color: #FFF;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.modal-header h3 {
margin: 0;
padding: 0 10px 0 10px;
line-height: 40px;
}
.modal-header h3 .close-modal {
float: right;
text-decoration: none;
color: #FFF;
}
.modal-footer {
background-color: #F1F1F1;
padding: 0 10px 0 10px;
line-height: 40px;
text-align: right;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top: solid 1px #CCC;
}
.modal-body {
padding: 10px 10px 10px 10px;
}
$(function () {
modalPosition();
$(window).resize(function () {
modalPosition();
});
$('.openModal').click(function (e) {
$('.modal, .modal-backdrop').fadeIn('fast');
e.preventDefault();
});
$('.close-modal').click(function (e) {
$('.modal, .modal-backdrop').fadeOut('fast');
});
});
function modalPosition() {
var width = $('.modal').width();
var pageWidth = $(window).width();
var x = (pageWidth / 2) - (width / 2);
$('.modal').css({ left: x + "px" });
}
Refer:-
Display gridview in modal pop up