HTML pages pop up in the middle of a drag and drop custom window layer
- 2020-03-30 02:50:30
- OfStack
How to use DIV pop-ups to dynamically display content: first hide the content in the popover with CSS and HTML, and then dynamically display it with JavaScript (in this tutorial, JQuery). This effect can not only make full use of the limited space, but also improve the user experience; More importantly, it doesn't affect SEO (because it actually exists on the page, but is initially invisible)
1. Define a div in the HTML page and implement what we need to show in the div.
A picture is worth a thousand words. Let's take a look at a screenshot of the DIV pop-up window:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405070951571.gif? 20144795237 ">
2. The CSS styles I used
The main thing to notice here is the definition of the div style, because we need to show that we're using the absolute position:absolute; Secondly, because of the pop-up layer, div must be in the outermost part, so we usually set z-index very large, here we set z-index:9999; The other thing is that the div itself is hidden and we need to set it to display:none, but in this case we need to look directly at the effect so we just want it to display using display:block;
3, we need to show it in the center, so we must first get the height and width of the browser, if there is a scroll bar horizontal or vertical deviation, we also need to get that length, by calculating the div should be browser position.
Let it show by clicking the button
rendering
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405070953122.gif? 20144795327 ">
4. Drag and drop the pop-up box
Code implementation
Here we only in view of the content of H2 div elements for clicking the drag and drop, if you need a global div can be modified, drag and drop principle: when the mouse in the press on the specified element, get the mouse point coordinates, through calculation, the image is moved to the corresponding position, once the mouse to click cancel, press the corresponding event has been cancelled, static page.
Call the drag-and-drop method
Now we can click on the title bar of the pop-up box and drag it around in the browser.
1. Define a div in the HTML page and implement what we need to show in the div.
<body>
<div id="login">
<h2><img src="images/close.png" alt="" class="close" /> Website login </h2>
<form id="loginForm" >
<div class="info"></div>
<div class="user"> The account No. : <input type="text" name="user" class="text" /></div>
<div class="pass"> The secret Code: <input type="password" name="pass" class="text" /></div>
<div class="button"><input type="button" name="sub" class="submit" value="" /></div>
</form>
<div class="other"> Register a new user | Forget your password? </div>
</div>
</body>
A picture is worth a thousand words. Let's take a look at a screenshot of the DIV pop-up window:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405070951571.gif? 20144795237 ">
2. The CSS styles I used
#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 notice here is the definition of the div style, because we need to show that we're using the absolute position:absolute; Secondly, because of the pop-up layer, div must be in the outermost part, so we usually set z-index very large, here we set z-index:9999; The other thing is that the div itself is hidden and we need to set it to display:none, but in this case we need to look directly at the effect so we just want it to display using display:block;
3, we need to show it in the center, so we must first get the height and width of the browser, if there is a scroll bar horizontal or vertical deviation, we also need to get that length, by calculating the div should be browser position.
$(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
$(".login").click(function ()
{
$("#login").show().center(350,250);//Display login box
});
rendering
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405070953122.gif? 20144795327 ">
4. Drag and drop the pop-up box
Code implementation
$(document).ready(function()
{
jQuery.fn.extend({
//Drag and drop functionality
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 in view of the content of H2 div elements for clicking the drag and drop, if you need a global div can be modified, drag and drop principle: when the mouse in the press on the specified element, get the mouse point coordinates, through calculation, the image is moved to the corresponding position, once the mouse to click cancel, press the corresponding event has been cancelled, static page.
Call the drag-and-drop method
$("#login").drag();
Now we can click on the title bar of the pop-up box and drag it around in the browser.