DESIGNING

Designing a web page treating as a paper, is out of date. Now days, web desingers are coming out with a new interactive layouts that enhance both the style and user interaction.Here, We will create a pop-up window which is one of the best way, to confine user attention, for ex- appearance of login form, when the user try to accces the protected area.



If you examine the above image carefully, you will come to know that such thing is only possible when we use three div tags. One is for the background content, over it is the mask div and the third one overlapping both of them is our pop-up div. It can also be clearly noted that the mask and pop-up div comes simultaneously together in the scenario.

Thus, html code for our page is..
(I have used comment to explain the code)
<body>
<div id="back"> <!--div containing our background content -->
<a href="#" id="pop">pop</a> <!--pop-up link-->

<div id="mask"></div> <!--div to disable background content-->
<div id="popup"><p><a href="#" id="close">Close</a></p></div> <!--pop-up div-->
</div>
</body>
Now, come the main stylesheet part ... CSS To overlap one div over another we are using the z-index property. The z-index property defines the position of the div tab in z-direction that is perpendicular to the monitor screen.
body{
z-index:0;
margin:0;
}
#popup
{
border-radius: 8px;
z-index:100;
position:fixed;
width:500px;
height:500px;
margin-right:25%;
margin-left:25%;
top:40px;
bottom:70px;
background-color:#333333;
display:none;
text-align:right;
}
#close
{
color:#ffffff;
cursor: pointer;
}
#mask
{
position:fixed;
top:0;
margin:0;
padding:0;
width:100%;
height: 100%;
opacity:.5;
display:none;
z-index:75;
background-color:#333333;    
}
Jquery part..The click() method triggers a function when a click event occurs. The logic is that when the user click on our link, both our About and mask tag fade in on the screen. Same function we wil use when the close link is clicked present in the about div.
<script>
$(document).ready(function(){

$("#pop").click(function(){

$("#popup").fadeIn("slow");
$("#mask").fadeIn("slow");

});
});

$(document).ready(function(){

$("#close").click(function(){

$("#popup").fadeOut("slow");
$("#mask").fadeOut("slow");

});
});
</script>







All rights reserved, the content is copyrighted to the author.

RELATED POST