JavaScript 弹出层

来源：互联网发布：送货单打印软件系统编辑：程序博客网时间：2024/05/16 00:28

一个简单的：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>");

以上是本人在开发中的一些小笔记，希望对大家有所帮助！