Question

我的网站上有一个订阅表单DailyPnut，我正在设法在您提交电子邮件地址（通过POST）后创建模式。 POST后模式会弹出，并显示另一个表单以输入您的名字。我的HTML如下：

<!--HOME SECTION-->
   <section id="home">
     <div id="home">
      <div class="container">
            <div class="col-md-12 centered">
              <h1 style="margin-bottom: 20px; margin-top"=0px;>
              <img src="images/logo.jpg" alt="logo" id="peercast"></h1><br>
              <h2 class="subtitle" style="padding-bottom: 10px;margin-bottom: 15px;">"The World in a Nutshell"</h2>
              <p style="padding-left: 3em; padding-right: 3em;"><i>In a nutshell: a  strangely named daily e-mail on world affairs that will make you sound marginally more intelligent and brighten up your mornings.</i></p>
            <div class="subscribe">
                <form method="post" action="subscribe.php" role="form"> 
                <input type="email" required="" placeholder="Enter your e-mail address..." class="subscribe-input" name="email" style="margin-bottom: 10px;">
                <button type="submit" class="btn btn-subscribe"     ><b>Subscribe</b></button>
     <input type="hidden" name="referr" id="referr"/>          
              </form>
            </div>
          </div>
        </div>
      </div>
   </div>
   <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

    </section>

Answer 1

使用ajax提交表单，然后在回调上加载模式。像这样：

首先将id添加到订阅按钮，以便于访问：

'string'.replace(/(\s|^)((?:\w\s){2,}\w)(\s|$)/g, function(a, b, c, d) {
     return b + c.replace(/\s/g, '') + d;
});

对电子邮件输入执行相同的操作：

<button type="submit" class="btn btn-subscribe" id="subscribe-btn">...

然后使用jquery绑定到click事件：

<input id="email-input" type="email" required="" placeholder="Enter your e-mail address..." class="subscribe-input" name="email" style="margin-bottom: 10px;">...

最后创建在按钮单击时调用的$('#subscribe-btn').on('click', doSubscribe);函数（注意这需要在绑定到click事件之前声明，因此此代码将在前一代码之前执行）：

doSubscribe

该代码可能需要进行一些调整才能使用您所拥有的内容，但它应该是您需要的基本概念。祝你好运！

来自“form method =”post“

1 个答案: