自己改寫一些jquery的部分代碼，自己總結出來一個比較好用的jquery彈出框，留著以后工作時候再用。喜歡就拿走吧！
代碼：
<!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> <script src="./jquery-1.11.1.min.js"></script><!--本地的 一定要引進jquery才有效哦 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> <script> jQuery(document).ready(function($) { $('.login').click(function(){ //jquery的點擊事件 $('.body-color').fadeIn(100);//全局變得黑的效果，具體的div就是theme-popover-mask這個 $('.hide-body').slideDown(200);//將隱藏的窗口div顯示出來 }) $('.close-window .close').click(function(){ $('.body-color').fadeOut(100);// $('.hide-body').slideUp(200);//將顯示的窗口隱藏起來 }) }) </script> </head> <!-- 整個彈出框分為三個主體，一個是關閉的div 一個中間主要顯示的div 最后一個就是增加其他內容的div --> <body> <div> <!-- 這就是點擊事件的觸發，其中 theme-login是可以修改的 --> <a class="login btn" href="javascript:;">點擊查看效果</a> </div> <div class="hide-body"> <div class="close-window"> <!-- 關閉窗口，也就是觸發關閉div的事件--> <a href="javascript:;" title="關閉" class="close">×</a> <h3>登錄 是一種態度</h3> </div> <!-- 中間主體顯示div 可以增加其他的樣式--> <div class="login-body dform"> <form class="signin" name="loginform" action="" method="post"> <ol> <li><h4>你必須先登錄！</h4></li> <li><label for="username">用戶名：</label><input class="ipt" type="text" id="username" value="lnc" size="20" /></li> <li><label for="password">密 碼：</label><input class="ipt" type="password" id="password" value="***********" size="20" /></li> <li><input class="btn btn-primary" type="submit" name="submit" value=" 登 錄 " /></li> </ol> </form> </div> <!-- 底部的div --> <div class="bottom"> <hr> <pre>底部部分文字顯示哦</pre> </div> </div> <div class="body-color"></div> </body> </html> <style> .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); } .login-body { padding: 60px 15px; color: #444; height: 148px; } .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; } .dform { padding: 80px 60px 40px; text-align: center; } .signin { margin: -50px -20px -50px 90px; text-align: left; font-size: 14px; } .signin h4 { color: #999; font-weight: 100; margin-bottom: 20px; font-size: 12px; } .signin li { padding-left: 80px; margin-bottom: 15px; } .signin ol { list-style-type: none; } .signin li strong { float: left; margin-left: -80px; width: 80px; text-align: right; line-height: 32px; } .signin .btn { margin-bottom: 10px; } .signin p { font-size: 12px; color: #999; } .theme-desc,.theme-version { padding-top: 0 } .body-color { z-index: 9998; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; filter: alpha(opacity = 40); display: none } .hide-body { z-index: 9999; position: fixed; top: 30%; left: 40%; width: 1000px; height: 618px; margin: -180px 0 0 -330px; border-radius: 5px; border: solid 2px #666; background-color: #fff; display: none; box-shadow: 0 0 10px #666; } .close-window { border-bottom: 1px solid #ddd; padding: 22px; position: relative; } .bottom { margin-top: 180px; } .close-window .close { float: right; color: #999; padding: 5px; margin: -2px -5px -5px; font: bold 14px/14px simsun; text-shadow: 0 1px 0 #ddd } .close-window .close:hover { color: #444; } </style>最終效果圖：
新聞熱點
疑難解答
