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

Source: Internet
Author: User

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 {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: 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


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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.