手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >基于Jquery+div+css实现弹出登录窗口(代码超简单)
基于Jquery+div+css实现弹出登录窗口(代码超简单)
摘要:具体代码详情如下所示:基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过z-index:9998;z-index:9999;...

具体代码详情如下所示:

基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过

z-index:9998;

z-index:9999;

值越大越在前面

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery点击弹出登陆窗口</title> <link rel="stylesheet" href="css/lanrenzhijia.css" media="all"> <script src="js/jquery.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> </head> <body> <div> <a href="javascript:;">点击查看效果</a> </div> <div> <div> <a href="javascript:;" title="关闭">×</a> <h3>登录 是一种态度</h3> </div> <div> <form name="loginform" action="" method="post"> <ol> <li><h4>你必须先登录!</h4></li> <li><strong>用户名:</strong><input type="text" name="log" value="lanrenzhijia" size="20" /></li> <li><strong>密码:</strong><input type="password" name="pwd" value="***" size="20" /></li> <li><input type="submit" name="submit" value=" 登 录 " /></li> </ol> </form> </div> </div> <div></div> </body> </html>

css文件jiaobenzhijia.css

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, del, dfn, em, img, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, button, input, table, caption, tbody, tfoot, thead, tr, th, td, menu { margin:0; padding:0; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display:block } audio, canvas, video { display:inline-block; *display:inline; *zoom:1 } audio:not([controls]) { display:none } table { border-collapse:collapse; border-spacing:0; empty-cells:show } ol, ul, menu { list-style:none } img { border:0 } a:focus { outline:none } em, i { font-style: normal; } button, input, select, textarea { font-size:100%; margin:0; vertical-align:-3px; outline:none; } button, input { border:1px solid; outline:none; line-height:normal; *overflow:visible } button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0 } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor:pointer; -webkit-appearance:button } input[type="search"] { -webkit-appearance:textfield; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box } input[type="search"]::-webkit-search-decoration { -webkit-appearance:none } textarea { overflow:auto; vertical-align:top } ::selection { background:#72d0eb; color:#fff; text-shadow:none } ::-moz-selection { background:#72d0eb; color:#fff; text-shadow:none } *[hidden] { display:none } a { color:#0088DB; text-decoration:none; cursor:pointer } a:hover { color:#2A5E8E } .clearfix:after, .central:after, .widget ul:after, .paging:after, .pagenav:after, .base-tit:after { content:"."; display:block; height:0; clear:both; visibility:hidden } .clearfix, .central, .widget ul, .paging, .pagenav, .base-tit { *+height:1%; } body, button, input, select, textarea, code { font-size:12px; font-family:microsoft yahei; color: #444; } /*window*/ /* input */ .ipt { border: solid 1px #d2d2d2; border-left-color: #ccc; border-top-color: #ccc; border-radius: 2px; box-shadow: inset 0 1px 0 #f8f8f8; background-color: #fff; padding: 4px 6px; height: 21px; line-height: 21px; color: #555; width: 180px; vertical-align: baseline; } .ipt-mini { width: 140px; padding: 1px 3px; } .ipt:focus { border-color: #95C8F1; box-shadow: 0 0 4px #95C8F1; } /* btn */ .btn { position: relative; cursor: pointer; display: inline-block; vertical-align: middle; font-size: 12px; font-weight: bold; height: 27px; line-height: 27px; min-width: 52px; padding: 0 12px; text-align: center; text-decoration: none; border-radius: 2px; border: 1px solid #ddd; color: #666; background-color: #f5f5f5; background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1); background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1); background: linear-gradient(top, #F5F5F5, #F1F1F1); } input.btn { height: 29px; } .btn:hover { border-color:#c6c6c6; color:#333; background-color:#f8f8f8; background:-webkit-linear-gradient(top, #f8f8f8, #f1f1f1); background:-moz-linear-gradient(top, #f8f8f8, #f1f1f1); background:linear-gradient(top, #f8f8f8, #f1f1f1); box-shadow:#ddd 0 1px 1px 0; } .btn:active, .btn.btn-active { box-shadow:#ddd 0 1px 2px 0 inset; border-color:#c6c6c6; } .btn:focus { border-color:#4d90fe; outline:none } .btn-primary { border-color: #3079ED; color: #F3F7FC; background-color: #4D90FE; background: -webkit-linear-gradient(top, #4D90FE, #4787ED); background: -moz-linear-gradient(top, #4D90FE, #4787ED); background: linear-gradient(top, #4D90FE, #4787ED); } .btn-primary:hover { border-color:#2F5BB7; color:#fff; background-color: #4D90FE; background: -webkit-linear-gradient(top, #4D90FE, #357AE8); background: -moz-linear-gradient(top, #4D90FE, #357AE8); background: linear-gradient(top, #4D90FE, #357AE8); } .btn-primary:active, .btn-primary.btn-active { box-shadow:#2176D3 0 1px 2px 0 inset; border-color: #3079ED; } .btn-primary:focus { border-color:#4d90fe; outline:none } .theme-buy { margin-top:10%; text-align: center; } .theme-gobuy, .theme-signin { font-size: 15px; } .theme-price { position: relative; bottom: -6px; font-family: microsoft yahei, Arial, Helvetica, sans-serif; margin-right: 20px; font-weight: bold; color: #f60; line-height: 32px; font-size: 24px; display: inline-block; } .theme-price dfn { font-style: normal; font-size: 18px; margin-right: 2px; } .theme-desc { padding: 30px; } .theme-version { padding: 30px; } .theme-popover-mask { z-index: 9998; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.4; filter:alpha(opacity=40); display:none } .theme-popover { z-index:9999; position:fixed; top:50%; left:50%; width:660px; height:360px; margin:-180px 0 0 -330px; border-radius:5px; border:solid 2px #666; background-color:#fff; display:none; box-shadow: 0 0 10px #666; } .theme-poptit { border-bottom:1px solid #ddd; padding:12px; position: relative; } .theme-popbod { padding:60px 15px; color:#444; height: 148px; } .theme-popbom { padding:15px; background-color:#f6f6f6; border-top:1px solid #ddd; border-radius:0 0 5px 5px; color:#666 } .theme-popbom a { margin-left:8px } .theme-poptit .close { float:right; color:#999; padding:5px; margin:-2px -5px -5px; font:bold 14px/14px simsun; text-shadow:0 1px 0 #ddd } .theme-poptit .close:hover { color:#444; } .btn.theme-reg { position: absolute; top: 8px; left: 43%; display: none } .inp-gray, .feed-mail-inp { border:1px solid #ccc; background-color:#fdfdfd; width:220px; height:16px; padding:4px; color:#444; margin-right:6px } .dform { padding:80px 60px 40px; text-align: center; } .dform .ipt_error { background-color:#FFFFCC; border-color:#FFCC66 } .dform-tip { display:none; background-color:#080; color:#fff; line-height:42px; margin-top:10px; font-size: 14px; } .dform-tip-errer { background-color: #CF301A; } .dform-tip a { display: inline-block; padding: 0 20px; margin-left:10px; background-color: #FFE924; color: #CF301A; } .dform-login { padding:0; height: 270px; overflow: hidden; } .dform-login iframe { height: 470px; margin-top: -180px; } .theme-signin { margin: -50px -20px -50px 90px; text-align:left; font-size: 14px; } .theme-signin h4 { color:#999; font-weight:100; margin-bottom: 20px; font-size: 12px; } .theme-signin li { padding-left: 80px; margin-bottom: 15px; } .theme-signin li strong { float: left; margin-left: -80px; width: 80px; text-align: right; line-height: 32px; } .theme-signin .btn { margin-bottom: 10px; } .theme-signin p { font-size: 12px; color: #999; } .theme-desc, .theme-version { padding-top: 0 } /*

以上代码就是小编给大家分享的基于Jquery+div+css实现弹出登录窗口,代码很简单吧,希望对大家有用。

【基于Jquery+div+css实现弹出登录窗口(代码超简单)】相关文章:

超酷右下浮出广告窗口代码

js实现异步循环实现代码

CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

jQuery实现弹出窗口中切换登录与注册表单

jquery实现动态改变div宽度和高度

根据内容自动调整弹出窗口大小的JS解决方案

纯javascript实现四方向文本无缝滚动效果

基于jQuery插件实现环形图标菜单旋转切换特效

jquery简单实现外部链接用新窗口打开的方法

jquery插件validation实现验证身份证号等

精品推荐
分类导航