Home > Developer > Web Develop
the principle of using div forms to display content dynamically: First use CSS and HTML to hide the contents of the pop-up window, and then use JavaScript (jquery in this tutorial) to animate them. This effect can not only make full use of the limited layout space, but also improve the user experience, and more importantly, it does not affect the SEO effect (because it actually exists in the page.) is only initially invisible)
1. Define a div in the HTML page and implement what we need to show in the Div.
<body><div id= "Login" >A picture of the thousand words. Let's look at the effect of this div popup form:
2. CSS style I use
#login {width:350px;height:250px;border:1px solid #ccc;p osition: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;p adding: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 :p Ointer;} #login. Other {text-align:right;padding:15px 10px;color: #666;}The main note in this is about the definition of div style, because we need to center to show that we use absolute positioning position:absolute, and secondly because it is a popup layer, div must be at the outermost, so we usually set the Z-index very large, here we set 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 see the effect so that it shows the use of display:block directly;
3, we need to let it center display. The height and width of the browser must be obtained first, assuming that there is a horizontal or vertical offset to the scroll bar, and that the length needs to be obtained. The location of the browser should be obtained by calculating the Div.
$ (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 unfold by clicking on the button$ (". Login"). Click (function () {$ ("#login"). Show (). Center (350,250);//Show Landing Box});
4, can drag the popup box
Code implementation
$ (document). Ready (function () {jQuery.fn.extend () {//Drag 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 <= $ (Windows). ScrollLeft ()) {left = $ (window). ScrollLeft ();} else if (Left > $ (window). Width () +$ (Windows). 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 are only for H2 elements in the div content for click-and-drag. Suppose you need a global div to make changes, drag-and-drop principle: When the mouse is pressed on the specified element. Get the mouse point coordinates, through the calculation, the picture also moved to the corresponding position, once the mouse click Cancel, the corresponding press event is also canceled, the page is compact.Call the drag and drop method
$ ("#login"). drag ();
Now we can click on the PopOver's title bar to drag and drop it in the browser.Impact Address
Click Sign in or Register
The HTML center bounces the custom form layer on the page (Implementation may drag)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
