我该如何在vb.net上显示我的模式弹出窗口

Question

<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>

This code is for the modal pop up message. When I click on the button it should show the modal pop up then when I click the "x" button then it should close.

The problem is when you click on the update button it shows the modal pop up but immediately goes off. "its like, it is there but not"

Should I do anything at back-end code or it can be fixed in front-end code, and how?

Answer 1

Remove asp:button and make it just input type, 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>

The reason that it is disappearing it because the button is posting back and reloading the form it just does it so quickly that you do not see it.

Answer 2

ASP.NET Button is always submit button (input). This server-side tag has an attribute OnClientClick which is very useful here.

<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>