Question

我正在将电子邮件订阅表单构建到我的asp.net网站中，当用户将其名称添加到订阅列表时，我试图显示模式窗口。我似乎无法让div隐藏在页面加载中。模态加载是页面加载，但是我希望在用户提交表单之前将其隐藏。

理想情况下，这将全部在服务器端完成，因为我不希望在提交表单之前弹出模式，并且客户端可能会触发误报。

我不确定通过背后的代码或可能的jQuery，实现这一目标的最佳方法是什么，我对此并不了解。

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

在<script>之前插入</head>，这样就不会出现毛刺

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

无法使用模式窗口隐藏div

1 个答案: