Create pop up step by step using jquery
1- Create Style like below for the pop up
.popup_box {
display: none;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.59);
top: 0%;
z-index: 100;
position: fixed;
z-index: 1000000;
}
.popup_details
{
border-radius: 5px;
display: none;
position: absolute;
_position: absolute;
min-height: 163px;
width: 504px;
background: rgb(248, 243, 243);
top: 26%;
left: 33%;
margin: -50px 0 0 -100px;
z-index: 100;
font-size: 15px;
-moz-box-shadow: 0 0 5px #B9B9B9;
-webkit-box-shadow: 0 0 5px #B9B9B9;
box-shadow: 0 0 5px #B9B9B9;
}
.popup_closebtn {
margin-top: 6px;
margin-bottom: 6px;
cursor: pointer;
}
.popup_inner_detail {
width: 95%;
margin: 0 auto;
height: 100px;
background-color: #f2f2f2;
border-radius: 3px;
border: 1px solid rgba(128, 128, 128, 0.24);
margin-top: 12px;
}
Step 2- Create a mark up like below and place your controls inside that pop up
<div class="popup_box" id="myPopUp" style="display: none;">
<div class="popup_details" id="myPopUpDetail" style="display: block; width: 646px;">
</div>
</div>
Step3 -Call the pop using jquery
Show pop up
$('#myPopUp').fadeIn("slow");
$('#myPopUpDetail').fadeIn("slow");
Hide pop up
$('#myPopUp').fadeout("slow");
$('#myPopUpDetail').fadeout("slow");
Hope this helps