Simple popup panel in HTML
In this blog, I have described how to create a simple popup window or display page as popup window. There are simple CSS file and JavaScript that used for open model popup. Steps are given below.
Step 1: Open notepad or any other HTML editor as Visual Studio ASP.NET etc.
Step 2: Write below CSS on your page.
<style type="text/css">
.fadePanel
{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 9999;
}
.Popup
{
position: fixed;
margin: 0px 25%;
z-index: 99999;
}
.InnerPopup
{
margin: auto;
min-width: 380px;
min-height: 200px;
background-color: #CEC9C9;
padding: 30px;
-moz-border-radius-topright: 50px;
border-top-right-radius: 50px;
-moz-border-radius-topleft: 50px;
border-top-left-radius: 50px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
-moz-border-radius-bottomleft: 50px;
border-bottom-left-radius: 50px;
border: 1px solid Black;
}
</style>
Step 3: Use below Script on your page.
<script type="text/javascript">
$(document).ready(function () {
ClosePopUp();
});
function ShowModalPopUp_SemiTransparentBG() {
$("#SemiTransparentBG").show('slow');
$("#PopUp").show('slow');
$("#PopUpBody")[0].innerHTML = "This popup brings a visual effect that tell user, they are not allow to click the background controls until this popup being closed.";
};
function ClosePopUp() {
$("#SemiTransparentBG").hide('slow');
$("#TransparentBG").hide('slow');
$("#PopUp").hide('slow');
};
</script>
Step 4: Include jquery-1.4.1.js on your page. This JavaScript file you easily download from difference sources. This JavaScript include before step 3.
Step 5: Now we create div that are open as popup. Line of code is given below.
<div>
<input type="button" id="Button2" value="Close" onclick="ShowModalPopUp_SemiTransparentBG();" /></div>
<div id="SemiTransparentBG" class="fadePanel semiTransparent">
</div>
<div id="PopUp" class="Popup">
<div class="InnerPopup">
<p id="PopUpBody">
</p>
<p>
<input type="button" id="Close" value="Close" onclick="ClosePopUp();" />
</p>
</div>
</div>
Leave Comment