需要引用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">密碼&nbsp;：</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"  >登&nbsp;&nbsp;錄</button>
                        <%--<button id="sub-login" type="button" class="btn btn-primary">&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;錄&nbsp;</button>--%>
                    </div>
                </div>
            </div>
    </div>
</div>