The principle of using DIV pop-ups to display content dynamically: First, use CSS and HTML to hide the content in the pop-ups, and then use JavaScript (JQuery in this tutorial) to display them dynamically. This effect not only makes full use of the limited layout space, but also improves the user experience; more importantly, it does not affect the SEO effect (because it actually exists in the page, but is initially invisible)
1. Define a div in the html page and implement what we need to display in the div.
The code copy is as follows:
<body>
<div id="login">
<h2><img src="images/close.png" />Website login</h2>
<form id="loginForm" >
<div></div>
<div>Account: <input type="text" name="user" /></div>
<div>Password: <input type="password" name="pass" /></div>
<div><input type="button" name="sub" value="" /></div>
</form>
<div>Register new user| Forgot your password? </div>
</div>
</body>
One picture is worth a thousand words. Let's take a look at the screenshot of the effect of this DIV pop-up window:
2. The CSS style I use
The code copy is as follows:
#login {
width:350px;
height:250px;
border:1px solid #ccc;
position:absolute;
display:block;
z-index:9999;
background:#fff;
}
#login h2 {
height:40px;
line-height:40px;
text-align:center;
font-size:14px;
letter-spacing:1px;
color:#666;
background:url(images/login_header.png) repeat-x;
margin:0;
padding:0;
border-bottom:1px solid #ccc;
cursor:move;
}
#login h2 img {
float:right;
position:relative;
top:14px;
right:8px;
cursor:pointer;
}
#login div.info {
padding:10px 0 5px 0;
text-align:center;
color:maroon;
}
#login div.user, #login div.pass {
font-size:14px;
color:#666;
padding:5px 0;
text-align:center;
}
#login input.text {
width:200px;
height:25px;
border:1px solid #ccc;
background:#fff;
font-size:14px;
}
#login .button {
text-align:center;
padding:15px 0;
}
#login input.submit {
width:107px;
height:30px;
background:url(images/login_button.png) no-repeat;
border:none;
cursor:pointer;
}
#login .other {
text-align:right;
padding:15px 10px;
color:#666;
}
The main thing to note here is the definition of the div style, because we need to center display, we use absolute positioning position:absolute; secondly, because it is a pop-up layer, the div must be at the outermost periphery, so the z-index is usually set to very large, here we set it to z-index:9999; another point is that the div itself is hidden and needs to be set to display:none, but here we need to directly look at the effect, so we can directly display it using display:block;
3. We need to let it be displayed in a center, so we must first get the height and width of the browser. If there is a horizontal or vertical offset of the scroll bar, we also need to get the length and obtain the position of the div to the browser through calculation.
The code copy is as follows:
$(document).ready(function()
{
jQuery.fn.extend({
center:function(width,height)
{
return $(this).css("left", ($(window).width()-width)/2+$(window).scrollLeft()).
css("top", ($(window).height()-height)/2+$(window).scrollTop()).
css("width",width).
css("height",height);
}
});
});
Let it show by clicking the button
The code copy is as follows:
$(".login").click(function ()
{
$("#login").show().center(350,250);//Show the login box
});
Reproduction diagram
4. Can drag and drop the pop-up frame
Code implementation
The code copy is as follows:
$(document).ready(function()
{
jQuery.fn.extend({
//Drag and drop function
drag:function(){
var $tar = $(this);
return $(this).mousedown(function(e){
if(e.target.tagName =="H2"){
var diffX = e.clientX - $tar.offset().left;
var diffY = e.clientY - $tar.offset().top;
$(document).mousemove(function(e){
var left = e.clientX - diffX;
var top = e.clientY - diffY;
if (left < 0){
left = 0;
}
else if (left <= $(window).scrollLeft()){
left = $(window).scrollLeft();
}
else if (left > $(window).width() +$(window).scrollLeft() - $tar.width()){
left = $(window).width() +$(window).scrollLeft() -$tar.width();
}
if (top < 0){
top = 0;
}
else if (top <= $(window).scrollTop()){
top = $(window).scrollTop();
}
else if (top > $(window).height() +$(window).scrollTop() - $tar.height()){
top = $(window).height() +$(window).scrollTop() - $tar.height();
}
$tar.css("left",left + 'px').css("top",top + 'px');
});
}
$(document).mouseup(function(){
$(this).unbind("mousemove");
$(this).unbind("mouseup")
});
});
}
});
});
Here we only click and drag the H2 elements in the div content. If the global div is needed, it can be modified. The drag principle: When the mouse presses on the specified element, get the coordinates of the mouse point, and through calculation, the picture is also moved to the corresponding position. Once the mouse clicks to cancel, the corresponding press event will be cancelled and the page is still.
Call the drag method
The code copy is as follows:
$("#login").drag();
Now we can click the title bar of the pop-up box and drag it in the browser at will.