Can't hide div with modal window

Question

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

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

</body>
</html>

Answer 1

Insert the <script> before </head> , so it doesnt have glitch

<script>
 $( function() {
   $('#dialog-message').dialog('close')
  } );                   
</script>

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

Can't hide div with modal window

Question

1 answers

solution1
0 2019-01-30 02:06:32

Can't hide div with modal window

Question

1 answers

solution1 0 2019-01-30 02:06:32

solution1
0 2019-01-30 02:06:32