The custom window layer is displayed in the center of the HTML page (drag-and-drop)

How to Use the DIV pop-up window to dynamically display content: first, use CSS and HTML to hide the content in the pop-up window, and then use JavaScript (JQuery in this tutorial) to dynamically display them. 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, only the initial status is invisible)

1. Define a div in the html page and display the content in the div implementation.

  Website login to register a new user | forgot password?

A picture is worth a thousand words. Let's take a look at the effect of the DIV pop-up window:

2. My CSS styles

#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;}

Here, we mainly pay attention to the definition of the div style, because we need to center the display, we use absolute positioning position: absolute; secondly, because it is the pop-up layer, the div must be at the periphery, therefore, we usually set the z-index to a very large value. 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 view the effect, so we can directly show it using the display: block;

3. We need to center the display. First, we must obtain the height and width of the browser. If there is a horizontal or vertical offset of the scroll bar, we also need to obtain the length, obtain the position of the div browser through calculation.

$(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);}});});

Click the button to display it

$ (". Login"). click (function () {$ ("# login"). show (). center (350,250); // display the login box });

4. You can drag and drop the pop-up box. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Vc3ryb25np1_vcd4kpha + tPrC68q1z9Y8L3A + cjxwp1_vcd4kphbyzsbjbgfzcz0 = "brush: java;" >$ (document ). ready (function () {jQuery. fn. extend ({// drag function drag: function () {var $ tar = $ (this); return functions (this%.mousedown(function(e%{if(e.tar get. 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 ()-character tar.height(character character tar.css ("left", left + 'px'character .css ("top", top + 'px') ;}$ (document ). mouseup (function () {$ (this ). unbind ("mousemove"); $ (this ). unbind ("mouseup ")});});}});});Here, we only use the H2 element in the div content for clicking and dragging. If you need a global div, you can modify the drag principle: When you press the mouse on the specified element, obtain the coordinates of the mouse. After calculation, the image is moved to the corresponding position. Once the mouse clicks cancel, the corresponding press event is also canceled, and the page is static.

Call the drag Method

$("#login").drag();

Now we can click the title bar in the pop-up box to drag it to the browser at will.

Effect address

Click to log on or register