Home > Developer > JavaScript
Problem: Make a pop-up layer effect with a drag (like in the prompt box)
I wrote about it in half and will continue to struggle tomorrow:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <meta name =" author "content =" Stri "/> <title> Create a javascript pop-up center effect </title> <style type =" text /css "> * {padding: 0; margin: 0; list-style: none;} body {font-family: Verdana, Geneva, sans-serif; font-size: 14px;} # a {width: 300px; height: 80px; border: 5px solid # d3d3d3; background-color: # f7f7f7; position: absolute; padding: 10px;}. btn {display: block; width: 80px; cursor: pointer; background-color: # f7f7f7; padding: 2px 0px; border: 1px solid # d5d5d5; vertical-align: middle; text-align: center; margin: 50px auto 5px; text-decoration: none;} a: hover {background-color: #333; color: # fff; font-weight: bold ;}</style> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Click "OPEN" in the lower right corner"
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <meta name =" author "content =" Stri "/> <title> Create a javascript pop-up center effect </title> <style type =" text /css "> * {padding: 0; margin: 0; list-style: none;} body {font-family: Verdana, Geneva, sans-serif; font-size: 14px;} # a {width: required PX; height: 80px; border: 5px solid # d3d3d3; background-color: # f7f7f7; position: absolute; padding: 10px; z-index: 9999;}. btn {display: block; width: 80px; cursor: pointer; background-color: # f7f7f7; padding: 2px 0px; border: 1px solid # d5d5d5; vertical-align: middle; text-align: center; margin: 50px auto 5px; text-decoration: none;} a: hover {background-color: #333; color: # fff; font-weight: bold ;}# aa {position: fixed; bottom: 20px; right: 10px ;}</style> </pead> <body> open </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The last explanation of each step. After all, the Code has not been fully organized.
It's hard to get the performance algorithm that expands the buffer from the center!
* *************** OK is not difficult ****************
This is to make the left and top attributes of the div gradient with the width.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <meta name =" author "content =" Stri "/> <title> Create a javascript pop-up center effect </title> <style type =" text /css "> * {padding: 0; margin: 0; list-style: none;} body {font-family: Verdana, Geneva, sans-serif; font-size: 14px;} # a {width: required PX; height: 80px; border: 5px solid # d3d3d3; background-color: # f7f7f7; position: absolute; padding: 10px; z-index: 9999;}. btn {display: block; width: 80px; cursor: pointer; background-color: # f7f7f7; padding: 2px 0px; border: 1px solid # d5d5d5; vertical-align: middle; text-align: center; margin: 50px auto 5px; text-decoration: none;} a: hover {background-color: #333; color: # fff; font-weight: bold ;}# aa {position: fixed; bottom: 20px; right: 10px ;}</style> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
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
