关于弹出窗实例

关于弹出窗实例：

前台：

<div id="div1">
<!--点击按钮 Begin-->
        <input type="button" name="123" value="123"  onclick="showScreen();" />
 <!--点击按钮 End-->
 <!--弹出窗DIV begin-->
        <div id="hintBox" runat="server" class="hintBox">
            <table style="width: 500px; height: 300px; padding-left: 20px;" border="0" cellpadding="0" cellspacing="0">
                <tr style="height: 50px;">
                    <td style="width: 250px;">
                        <asp:Button Text="确定" runat="server" ID="Btn1" CssClass="CssBtn1" OnClientClick=" return Click();"  />
                    </td>
                    <td style="width: 250px;">
                        <asp:Button Text="取消" runat="server" ID="Btn2" CssClass="CssBtn1" OnClientClick="return Close();" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:Label ID="Label1" CssClass="LabText" Text="拒绝理由：" runat="server" />
                        <asp:TextBox ID="txtWXProfile" CssClass="kuangN" runat="server" TextMode="MultiLine"
                            Rows="4" cols="48" Style="width: 450px; height: 220px;" />
                    </td>
                </tr>
            </table>
        </div>
        <!--弹出窗 DIV End-->
        <!--遮罩层 begin-->
        <div class="lock" runat="server" id="lock">
        </div>
        <!--遮罩层 End-->

CSS：

.CssBtn1 {
    box-shadow: 1px 1px 1px 1px #D4D4D4;
    width: 100px;
    height: 35px;
    background-color: #44B649;
    border: 1px solid #44B649;
    color: #fff;
    font-size: 16px;
    margin-left: 40px;
    border-radius: 2px;
}
.hintBox {
    box-shadow: 10px 5px 10px 0px #ccc;
    border: 1px solid #ccc;
    width: 500px;
    height: 300px;
    background: #FFFFFF;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999; /* margin: -3.025rem 0.000rem 0.000rem -6.025rem; */
    overflow: hidden;
    border-radius: 2px;
    display: none;
}
.LabText {
    font-family: "微软雅黑";
    color: #666666;
}
/*拒绝理由*/
.kuangN {
    border: 1px solid #ccc;
    overflow: auto;
}
/*遮罩层的样式*/
.lock {
    background: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    filter: alpha(opacity=50); /*IE滤镜，透明度50%*/
    -moz-opacity: 0; /*Firefox私有，透明度50%*/
    opacity: 0; /*其他，透明度50%*/
    z-index: 999;
    display: none;
}

JS：

function showScreen() {


    //获取宽高 初始值
    var bodyH = $('body').height();
    var bodyW=$('body').width();
    var windowH = $(window).height();
    var widnowW = $(window).width();
    var DivID = $('.hintBox');
    var lock = $('.lock');
    var top = (windowH - DivID.height()) / 2;
    var left = (widnowW - DivID.width()) / 2;

    if (bodyH < windowH) {
        bodyH = windowH;
    }


    //显示 DIV 和 遮罩层
    lock.css({
        heigth: bodyH,
        width: bodyW,
        display: "block"

    });
    DivID.css({
        display: "block"

    });
    DivID.css('top', top).css('left', left);
    window.onresize = function () {
        var top = ($(window).height() - $('.hintBox').height()) / 2;
        var left = ($(window).width() - $('.hintBox').width()) / 2;
        $('.hintBox').css('top', top).css('left', left);
    }

    $('.kuangN').focus();//设定光标位置
}

function Close() {
    var DivID = document.getElementById("hintBox");
    var lockID = document.getElementById("lock");
    var TextID = document.getElementById("txtWXProfile");
    DivID.style.display = "none";
    lockID.style.display = "none";
    TextID.value = "";
    return false;
}

function Click() {
    var TextValue = document.getElementById("txtWXProfile").value;
    TextValue = TextValue.replace(/\ +/g, "");
    TextValue = TextValue.replace(/[ ]/g, "");
    TextValue = TextValue.replace(/[\r\n]/g, "");
    if (sTrim(TextValue)=="") {
        alert("拒绝理由不能为空！");
        TextID.value = "";
        return false;
    }
    else {
        return true;
    }
}