Can't hide div with modal window

Can't hide div with modal window

Im building an email subscription form into my asp.net site and I'm trying to show the modal window when the user adds their name to the subscribe list. I can't seem to get the div to hide on pageload. The modal loads on page load, but I want it to be hidden until the user submits the form.

Im building an email subscription form into my asp.net site and I'm trying to show the modal window when the user adds their name to the subscribe list. I can't seem to get the div to hide on pageload. The modal loads on page load, but I want it to be hidden until the user submits the form.

Ideally this would all be done server side since i don't want the modal to pop up until the form is submitted and doing it client side could trigger a false positive.

I'm not sure what the best way to achieve this would be, through code behind or possibly jQuery, which I don't know much about.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title>

<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#dialog-message" ).dialog({ modal: true, buttons: { Ok: function() { $( this ).dialog( "close" ); } } }); } ); </script>

<meta name="viewport" content="width=device-width, initial-scale=1"/> <style> .responsive { width: 40%; height: auto; } </style> <meta name="viewport" content="width=device-width, initial-scale=1"/> <style> img { display: block; margin-left: auto; margin-right: auto; } </style> <style> .simple-subscription-form { background: #000000; color: #94C60D; padding: 2rem; border-radius: 0; align-content: center } </style> <style>

.simple-subscription-form.button { margin-bottom: 0; border-radius: 0 0 0 0; } </style> <style> #dialog-message { display: none; padding: 5px; } </style> <style> div.hidden { display: none; } </style> </head> <body bgcolor="black"> <div class="simple-subscription-form" id="emailForm">

    &lt;form id="email" runat="server"&gt;
            &lt;script type="text/javascript"&gt;
    function showDiv() {
        div = document.getElementById('dialog-message');
        div.style.display = "block";
    }
&lt;/script&gt;
        &lt;h4&gt;Subscribe&lt;/h4&gt;
        &lt;p&gt;Receive updates and latest news direct from our team. Simply enter your email below :&lt;/p&gt;
        &lt;div class="input-group"/&gt;
        &lt;span class="input-group-label"&gt;
            &lt;i class="fa fa-envelope"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;input class="input-group-field" runat="server" id="emailSignupField" type="email" placeholder="Email" required/&gt;
        &lt;asp:button class="button" OnClientClick="javascript:showDiv(#dialog-message);" OnClick="emailSignupForm_click" runat="server" id="submitEmailForm" Text="Sign Up Now"&gt;&lt;/asp:button&gt;
      &lt;/form&gt;
       &lt;div id="dialog-message" title="Subscribed!" class="hidden" &gt;
        &lt;p&gt;
         &lt;span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"&gt;&lt;/span&gt;
            You have been successfully added to our Mailing List
        &lt;/p&gt;
        &lt;/div&gt;

</div>

</body> </html>


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Add asp.net Identity in empty project

LIKE | COMMENT | SHARE | SUBSCRIBE Today, in this tutorial you will see the process of adding an ASP.NET Identity to the ASP.NET Web Application developed in...

List all users from asp net core identity

LIKE | COMMENT | SHARE | SUBSCRIBE In this video, i will show you How to retrieve and display all the registered application users in asp.net core using the ...

Extend IdentityUser in ASP NET Core

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorials, I will show you how to extend IdentityUser in asp.net core.. Subscribe & Stay Connected! Thank You! ♥ #...