HTML基於bootstrap的登入彈出框
需要引用bootstrap的js庫。
js中的引用方式,用jQuery的fadein fadeout;
$(".theme-popover.login").fadeIn(); //開啟登入框
/**
*登入框
*/
.theme-popover {z-index:9999;position:fixed;top:25%;left:35%;width:30%;height:360px;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;background:#f3f3f3;}
.theme-poptit h3{padding:0;margin:0;text-indent:35px;font-family:"微軟雅黑","宋體";color:#333;font-weight:normal;}
.theme-popbod {padding:20px 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;}
.theme-poptit img{display:block;float:left;width:24px;height:24px;position:absolute;top:13px;left:15px;}
<!--登入彈出框-->
<div class="theme-popover login" ><div class="theme-poptit">
<a href="javascript:;" title="關閉" class="close">×</a>
<img src="../../assets/images/gather/smlogo.png" title="logo"/>
<h3>登入</h3>
</div>
<div class="theme-popbod dform">
<div class="form-horizontal">
<div class="form-group">
<label for="userName" class="col-sm-3 control-label">使用者名稱:</label>
<div class="col-sm-8" style="padding-left: 0px">
<input type="text" class="form-control" id="userName" placeholder="使用者名稱">
</div>
</div>
<div class="form-group">
<label for="passWord" class="col-sm-3 control-label">密碼 :</label>
<div class="col-sm-8"style="padding-left: 0px">
<input type="password" class="form-control" id="passWord" placeholder="密碼">
</div>
</div>
<div class="form-group">
<label for="verifycode" class="col-sm-3 control-label">驗證碼:</label>
<div class="col-sm-4" style="padding-left: 0px">
<input type="text" class="form-control" id="verifycode" placeholder="驗證碼">
</div>
<div id="chverifycodeImg" class="col-sm-4" style="padding-top:6px;" >
<img id="verifycodeImg" src='' title="點選重新整理" style="cursor: pointer;"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10" >
<button id="sub-login" class="sign-button" >登 錄</button>
<%--<button id="sub-login" type="button" class="btn btn-primary"> 登 錄 </button>--%>
</div>
</div>
</div>
</div>
</div>