JavaScript 彈出層

一個簡單的：JavaScript 彈出層 效果

1.這個是彈出的層和遮罩層的樣式

   <style type="text/css">
        .info
        {
            position: absolute;
            width: 520px;
            border: 1px;
            display: none;
            border-style: solid;
            border-color: #99BBE8;
            background-color: #FFFFFF;
            z-index: 1001;
            top: 20%;
            left: 20%;
        }
        .bg
        {
            border: 2px solid #C5DEF4;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1000;
            background-color: #dddddd;
            opacity: 0.4;
            filter: alpha(opacity:40);
            -moz-opacity: 0.4;
            display: none;
            top: 0px;
            left: 0px;
        }
    </style>

2.這個是彈出層的JavaScript代碼，其中0表示彈出，1表示隱藏

<script type="text/javascript">
        function showAndHideDIV(val) {
            document.getElementById("bg").style.display = (val == 0) ? "inline-block" : "none";
            document.getElementById("info1").style.display = (val == 0) ? "inline-block" : "none";
            return false;
        }
 </script>

 

3.下面是頁面代碼

<div>
        <div id="bg" class="bg">
        </div>
        <div id="info1" class="info">
            <table width="500px" bgcolor="dimgray" cellpadding="3" cellspacing="1" style="margin: 10px">
                <tr>
                    <td class="t1" colspan="2" style="width: 500px" align="right">
                        <p style="text-align: center; font-size: 16px; font-weight: bold;">
                            一級指標信息維護</p>
                    </td>
                </tr>
                <tr>
                    <td class="t3" align="right" nowrap="nowrap" style="width: 100px">
                        指標名稱：
                    </td>
                    <td class="t1" style="width: 400px">
                        <tomado:TextBoxForValidate ID="txtFirstName" runat="server" ValidEmptyError="*" AllowEmpty="False"
                            ValidGroup="CheckFirst" Width="300px"></tomado:TextBoxForValidate>
                    </td>
                </tr>
                <tr>
                    <td class="t3" align="right" nowrap="nowrap" style="width: 100px; height: 31px;">
                        指標分數：
                    </td>
                    <td class="t1" colspan="0" style="width: 400px; height: 31px;">
                        <tomado:TextBoxForValidate ID="txtFirstGrade" runat="server" ValidEmptyError="*"
                            AllowEmpty="False" Width="300px" ValidGroup="CheckFirst" ValidType="Number"></tomado:TextBoxForValidate>
                    </td>
                </tr>
                <tr>
                    <td class="t3" align="right" nowrap="nowrap" style="width: 100px">
                        指標備註：
                    </td>
                    <td class="t1" colspan="0" style="width: 400px">
                        <asp:TextBox ID="txtFirstRemark" runat="server" Width="300px"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="t1" colspan="2" style="width: 500px" align="right">
                        <asp:Button ID="btnFirstSave" runat="server" Text=" 保 存 " CssClass="inputButton"
                            ValidationGroup="CheckFirst" OnClick="btnFirstSave_Click" />  
                        <asp:Button ID="btnFirstCancel" runat="server" Text=" 取 消 " OnClientClick="showAndHideDIV(1);"
                            CssClass="inputButton" OnClick="btnFirstCancel_Click" />
                    </td>
                </tr>
            </table>
        </div>
</div>

 

3.1 這個是Html控件

<input type="button" onclick="showAndHideDIV1(0)" value="彈出層" />

3.2 這個是服務器控件   記得加上Return  不然就會彈出了又會關閉，同時在JavaScript裏也要加上：return false;

<asp:Button ID="btntest" Text="彈出層" runat="server" OnClientClick="return showAndHideDIV(0);" />

 

3.3在後臺調用彈出層：

ClientScript.RegisterStartupScript(ClientScript.GetType(), "myscript", "<script>showAndHideDIV(0);</script>");

以上是本人在開發中的一些小筆記，希望對大家有所幫助！