HTML + CSS + JQuery實現彈框__HTML

HTML + CSS + JQuery實現彈框
CSS

   <style type="text/css">    #fullbg {        background-color: gray;        left: 0;        opacity: 0.6;        position: absolute;        top: 0;        z-index: 50000;        filter: alpha(opacity = 50);        -moz-opacity: 0.5;        -khtml-opacity: 0.5;    }    #dialog {        left: 43%;        margin: -200px 0 0 -200px;        position: fixed !important; /*  浮動對話方塊 */        position: absolute;        top: 30%;        z-index: 100000;        display: none;    }</style>

HTML

<div id="fullbg"></div><div id="dialog">    <div id="remarkDiv"        style="margin-left: 0px; width: 100%;background-color: #e5e5e5;border-radius:10px;">        <div id="dialogTitleDiv" style="background-color:#a7c0ce;border-radius:10px 10px 0 0;height:40px;font-size:20px;font-weight:bold;padding-top:15px;" align="center">            備忘        </div>        <div id="dialogContentDiv" style="padding:20px 10px 0 10px;">            <textarea rows="5" style="width:350px;" id="auditRemark"></textarea>        </div>        <span  align="center" name='errMsgTip' style="display:block;color:red;"></span>        <div align="center" bgcolor="#cccccc">            <input type="button" value="關閉" style="width:120px;margin-bottom:15px;"  onclick="closeBg()" class="btn" />            <input type="button" value="提交" style="width:120px;margin-bottom:15px;"  onclick="" class="btn" />        </div>    </div></div>

JQuery

<script type="text/javascript">                    function showBg() {        $("#dialog").show();        $("#remarkDiv").show();        var bh = $("body").height();        var bw = $("body").width();        $("#fullbg").css({            height : bh,            width : bw,            display : "block"        });    }    //關閉灰色 jQuery 遮罩    function closeBg() {        $("#fullbg,#dialog").hide();        $("[name='errMsgTip']").text('')    }</script>