首页 > 解决方案 > Onclick 上的弹出表单错误

问题描述

我有这些按钮,当点击弹出表单时应该显示。但是发生了什么是它弹出一秒钟然后点击我做错了什么时消失了?我认为我的代码没问题。

按钮代码:

<button onclick="Openform()">Add New WorkStation</button>

javascript:

 <script>
        function Openform() {
            document.getElementById('popupform').style.display = "block";
        }
    </script>

CSS:

.divpopup {
                margin-left: auto;
                margin-top: auto;
                display: none;
            }

应该弹出的 div:

 <div id="popupform" class="divpopup">

            <asp:TextBox ID="txtWorkStation" runat="server" placeholder="WorkStation Name"></asp:TextBox><br />
            <asp:DropDownList ID="ddlWorkStation" runat="server">
                <asp:ListItem Text="Active" Value="1"></asp:ListItem>
                <asp:ListItem Text="InActive" Value="0"></asp:ListItem>
            </asp:DropDownList><br />
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
    </div>

标签: javascripthtml

解决方案


这是因为您正在使用一个按钮,这会导致一个重置页面的回发。

您可以添加一个基本上取消按钮原始回发的返回值:

<button onclick="Openform(); return false;">Add New WorkStation</button>

或者使用按钮类型的输入:

<input type="button" onclick="Openform()" value="Add New WorkStation" />

或者取消按钮自然回发行为的另一种方式:

function Openform() {
    event.preventDefault();
    document.getElementById('popupform').style.display = "block";
}

推荐阅读