我应该在 vb.net 上做什么来显示我的模态弹出窗口答案

【问题标题】：what should I do at vb.net to display my modal pop up我应该在 vb.net 上做什么来显示我的模态弹出窗口
【发布时间】：2016-10-26 16:50:54
【问题描述】：

<asp:Button ID="btnupdate" runat="server" Text="UPDATE" ValidationGroup="check" />

        <div id="msgdiv" class="modal">
            <!-- Modal content -->
            <div class="modal-content">
                <span class="close">×</span>
                <p>
                    update ok confirm pls login again!!!!!!</p>
            </div>
        </div>

     <script>


        var modal = document.getElementById('msgdiv'); 


        var btn = document.getElementById("btnupdate"); 


        var span = document.getElementsByClassName("close")[0];

        btn.onclick = function () {
            modal.style.display = "block";
        }

        span.onclick = function () {
            modal.style.display = "none";
        }

    </script>

此代码用于模式弹出消息。当我点击按钮时，它应该显示模式弹出然后当我点击“x”按钮时它应该关闭。

问题是当您单击更新按钮时，它会显示模式弹出但立即消失。 “它就像，它存在但不存在”

我应该在后端代码中做任何事情还是可以在前端代码中修复它，以及如何？

【问题讨论】：

标签： javascript jquery html asp.net vb.net

【解决方案1】：

去掉 asp:button 让它只是输入类型，runat server:

<input ID="btnupdate" runat="server" type="button" value="UPDATE" ValidationGroup="check" />

        <div id="msgdiv" class="modal">
            <!-- Modal content -->
            <div class="modal-content">
                <span class="close">×</span>
                <p>
                    update ok confirm pls login again!!!!!!</p>
            </div>
        </div>

     <script>


        var modal = document.getElementById('msgdiv'); 


        var btn = document.getElementById("btnupdate"); 


        var span = document.getElementsByClassName("close")[0];

        btn.onclick = function () {
            modal.style.display = "block";
        }

        span.onclick = function () {
            modal.style.display = "none";
        }

    </script>

它消失的原因是因为按钮正在回发并重新加载表单，它执行得太快以至于你看不到它。

【讨论】：

【解决方案2】：

ASP.NET 按钮始终是 submit 按钮（输入）。这个服务器端标签有一个属性OnClientClick，在这里非常有用。

<asp:Button ID="btnupdate" runat="server" OnClientClick="return showModal()" Text="UPDATE" ValidationGroup="check" />
<%--Note "return" --%>
...
<script>
function showModal(){
   //do what you need to show
   return false; //prefent form submission
}
</script>

【讨论】：