具体代码详情如下所示：
基本思路先隐藏（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实现弹出登录窗口，代码很简单吧，希望对大家有用。