2018-1-17 js popup div Login window

Last Update:2018-01-17 Source: Internet

Author: User

Tags number sign visibility email account

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Today to organize an example, how to use JS to implement the popup login window:

<!doctype html>
<meta charset= "Utf-8" >
<title> Bullets Login Box </title>
<style>
#tanchuang {(style setting)

position:fixed; (absolute positioning)
top:140px;
left:415px;
Visibility:hidden; (Hidden by default)
Overflow:hidden;
Background-color: #FFFFFF; (Background color)
border:1px solid #878787; (Border setting)

border-radius:6px; (Fillet setting)
box-shadow:0px 5px 16px #000; (Shadow Settings)
}
. tanchuang1{
width:530px;
height:40px;
border:1px solid #ccc;
Background: #2d2d2d;
border-radius:4px;
}
. denglu_1{
Float:left;
position:relative;
top:10px;
left:16px;
}
. denglu_1 b{
Color: #ffffff;
}
. denglu_2{
Float:right;
position:relative;
width:12px;
height:13px;
Background:url (wangyiyun/img/youneirong/layer.png) no-repeat 0px-93px;
top:14px;
Left: -19px;
}
. denglu_2 span{
Color: #888888;
}
. tanchuang2{
width:299px;
height:208px;
Float:left;
border-right:1px dashed #ccc;
margin-top:41px;
Background:url (wangyiyun/img/youneirong/platform.png) no-repeat 45px 0px;
}
. tanchuang_input{
width:225px;
height:30px;
}
. tanchuangin{
Background: #418fd9;
position:relative;
top:130px;
left:33px;
Text-align:center;
border-radius:3px;
border:1px solid #3984ce;
}
. tanchuanginput{
Background: #f6f6f6;
position:relative;
top:141px;
left:33px;
border-radius:3px;
Text-align:center;
border:1px solid #c4c4c4;
}
. tanchuang3{
width:228px;
height:208px;
Float:left;
margin-top:40px;
}
. tanchuangnei{
Text-decoration:none;
position:relative;
Top: -39px;
left:50px;
Color: #333333;
}
. Tanchuang3 li{
Margin-top: -8px;
List-style-type:none;
font-size:13px;
}
. li1,.li3,.li2,.li4{
width:41px;
height:47px;
position:relative;
Top: -10px;
}
. li1{

Background:url (wangyiyun/img/logo.png) no-repeat-148px-664px;
}
. li2{
Background:url (wangyiyun/img/logo.png) no-repeat-188px-664px;
}
. li3{
Background:url (wangyiyun/img/logo.png) no-repeat-229px-664px;
}
. li4{
Background:url (wangyiyun/img/logo.png) no-repeat-269px-664px;
}
</style>

<body>

<div class= "Neishen2" onclick= "ShowPopup (528,325)" ><a href= "#" ></a></div> (content) (Definition method ShowPopup (528,325))

<div id= "Tanchuang" > (Pop-up window content)
<div class= "Tanchuang1" >
<div class= "Denglu_1" >
<b> Login </b>
</div>
<div class= "denglu_2" onclick= "Hidepopup ()" > (definition Method Hidepopup ())
</div>
</div>
<div class= "Tanchuang2" >
<a href= "#" ><input type= "button" class= "Tanchuang_input tanchuangin" value= "phone number sign in" ></a>
<a href= "#" ><input type= "button" class= "Tanchuang_input tanchuanginput" value= "register" ></a>
</div>
<div class= "Tanchuang3" >
<ul>
<li class= "Nnli" >
<div class= "Li1 Neili" ></div>
<a href= "#" class= "Tanchuangnei" > Login </a>
</li>
<li>
<div class= "Li2 Neili" ></div>
<a href= "#" class= "Tanchuangnei" &GT;QQ login </a>
</li>
<li>
<div class= "Li3 Neili" ></div>
<a href= "#" class= "Tanchuangnei" > Weibo login </a>
</li>
<li>
<div class= "Li4 Neili" ></div>
<a href= "#" class= "Tanchuangnei" > NetEase email account login </a>
</li>
</ul>
</div>
</div>

</body>

function ShowPopup (w,h) {(Definition method, pop-up window)
var popUp = document.getElementById ("Tanchuang"); (get Element)
PopUp.style.top = "140px"; (Set properties, pop-up height from top of window)
PopUp.style.left = "415px"; (Set properties, Bounce window to left width)
PopUp.style.width = w + "px"; (Set properties, pop-up window width)
PopUp.style.height = h + "px"; (Set properties, pop-up window height)
popUp.style.visibility = "visible"; (Set properties, popup window display)
}

function Hidepopup () {(Define Method, Hide window)
var popUp = document.getElementById ("Tanchuang");
popUp.style.visibility = "hidden"; (Set hidden properties of the window)
}

</script>

2018-1-17 js popup div Login window

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More