javascript - jQuery右侧弹出窗口不适用于联系表单!有人对此有解决方案吗？

侧面幻灯片弹出窗口仅接受段落内容。我想向其中添加联系表格。小提琴-link here

一个有效的例子在这里-https://grapyhost.com/tstt/

$(function() {

  // from right to left
  $('#test2').PopupLayer({
    to: 'left',
    blur: true,
    content: "<p class='dmpopup'>fdgdfgdfgdfg</p>",
    color: "#fff",
    backgroundColor: "#222",
  });


});

最佳答案

您可以使用引导模式来完成任务。

代码在这里：

<div class="container">
  <div class="row">

    <h1 class="text-center"><a href="#myModal" role="button" class="btn btn-primary btn-lg" data-toggle="modal">Contact Us</a></h1><!-- This is the button that will show the contact form-->

  </div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><!-- This is the contact form that will be displayed-->
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">We'd Love to Hear From You</h3>
      </div>
      <div class="modal-body">
        <form class="form-horizontal col-sm-12">
          <div class="form-group"><label>Name</label><input class="form-control required" placeholder="Your name" data-placement="top" data-trigger="manual" data-content="Must be at least 3 characters long, and must only contain letters." type="text"></div>
          <div class="form-group"><label>Message</label><textarea class="form-control" placeholder="Your message here.." data-placement="top" data-trigger="manual"></textarea></div>
          <div class="form-group"><label>E-Mail</label><input class="form-control email" placeholder="[email protected] (so that we can contact you)" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address ([email protected])" type="text"></div>
          <div class="form-group"><label>Phone</label><input class="form-control phone" placeholder="999-999-9999" data-placement="top" data-trigger="manual" data-content="Must be a valid phone number (999-999-9999)" type="text"></div>
          <div class="form-group"><button type="submit" class="btn btn-success pull-right">Send It!</button> <p class="help-block pull-left text-danger hide" id="form-error">&nbsp; The form is not valid. </p></div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
      </div>
    </div>
  </div>
</div>

工作fiddle

关于javascript - jQuery右侧弹出窗口不适用于联系表单!有人对此有解决方案吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43422960/