Home > Developer > Web Develop
Some time ago want to do a direct re-page to do a popup box to do the modification and new features, check a lot of charges, and over and over finally found a good effect on the RUNJS, a repair can be used, thanks to Daniel's sharing
HTML Source:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery Click to pop up the login window </title>
<link rel= "stylesheet" type= "Text/css" href= "Http://sandbox.runjs.cn/uploads/rs/55/sjckzedf/lanrenzhijia.css" >
<script type= "Text/javascript" src= "Http://sandbox.runjs.cn/uploads/rs/55/sjckzedf/jquery-1.8.0.min.js" > </script>
<script>
JQuery (document). Ready (function ($) {
$ ('. Theme-login '). Click (function () {
$ ('. Theme-popover-mask '). FadeIn (100);
$ ('. Theme-popover '). Slidedown (200);
})
$ ('. Theme-poptit. Close '). Click (function () {
$ ('. Theme-popover-mask '). FadeOut (100);
$ ('. Theme-popover '). Slideup (200);
})
})
</script>
<body>
<div class= "Theme-buy" >
<a class= "btn btn-primary btn-large theme-login" href= "javascript:;" > Click to view Effects </a>
</div>
<div class= "Theme-popover" >
<div class= "Theme-poptit" >
<a href= "javascript:;" title= "Close" class= "Close" >x</a>
</div>
<div class= "Theme-popbod dform" >
<form class= "Theme-signin" name= "LoginForm" action= "method=" POST ">
<ol>
<li><li><strong> Username: </strong><input class= "IPT" type= "text" name= "log" value= "Lanrenzhijia" size= " "/></li>
<li><strong> Password: </strong><input class= "IPT" type= "password" name= "pwd" value= "* * *" size= "20"/ ></li>
<li><input class= "btn btn-primary" type= "Submit" name= "submit" value= "Login"/></li>
</ol>
</form>
</div>
</div>
<div class= "Theme-popover-mask" ></div>
</body>
jquery Click Popup--Mask effect--Popup box
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
