CODEWITHSUNDEEP
javascriptjqueryhtmlasp.netvb.net
dasran rajlui
dasran rajlui

Reputation: 53

what should I do at vb.net to display my modal pop up

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

Upvotes: 2

Views: 1438

Answers (2)

Alex Kudryashev
Alex Kudryashev

Reputation: 9460

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>

Upvotes: 1

EJD
EJD

Reputation: 751

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.

Upvotes: 2

Related Questions