手机
当前位置:查字典教程网 >编程开发 >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实现弹出登录窗口(代码超简单)】相关文章:

基于Web标准的UI组件 — 树状菜单(2)

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

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

JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)

js实现精美的银灰色竖排折叠菜单

基于jquery实现下拉框美化特效

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

jquery实现的判断倒计时是否结束代码

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

基于jQuery实现的无刷新表格分页实例

精品推荐
分类导航