Question

我正在使用带有表单的自定义模态窗口，无法从按钮关闭窗口。我已尝试过各种数据解除选项，但仍无法正常工作。我正在菜单中启动模式，点击li元素，如下所示：

<li><a href="#modal">Contact</a></li>

这是对的吗？

我也很困惑为什么在单击;时间x时窗口关闭。由于我是html5的新用户，如果有人可以提供帮助，我将不胜感激。非常感谢

Bootstrap v3.3.7

HTML

<div class="modal" id="modal" role="dialog">
  <div class="modal__dialog">
    <section class="modal__content">
      <header class="modal__header">
        <h2 class="modal__title"><div style="margin: 0 0 0 30px;">Contact Us</div></h2>
        <div style="margin: 4px 0 0 34px; color: white;">If you need to contact us, please use this form and we shall respond as soon as possible. Thanks</div>
        <a href="#" class="modal__close">&times;</a>
      </header>
      <div class="modal__body">
        <div class="content-block contact-3">
          <div class="container">
            <div class="row">
              <div class="col-md-8">
                <div id="contact" class="form-container">
                  <fieldset>
                    <div id="message"></div>
                    <form method="post" action="js/contact-form.php" name="contactform" id="contactform">
                      <div class="form-group">
                        <input name="name" id="name" type="text" value="" placeholder="Name" class="form-control" />
                      </div>
                      <div class="form-group">
                        <input name="email" id="email" type="text" value="" placeholder="Email" class="form-control" />
                      </div>
                      <div class="form-group">
                        <input name="phone" id="phone" type="text" value="" placeholder="Phone" class="form-control" />
                      </div>
                      <div class="form-group">
                        <textarea name="comments" id="comments" class="form-control" rows="3" placeholder="Message" id="textArea"></textarea>
                        <div class="editContent">
                          <p class="small text-muted"><span class="guardsman">* All fields are required.</span> Once we receive your message we will respond as soon as possible.</p>
                        </div>
                      </div>
                      <div class="form-group">
                        <button class="btn btn-default" type="button" class="modal" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary" type="submit" id="cf-submit" name="submit">Send</button>
                      </div>
                    </form>
                  </fieldset>
                </div>
                <!-- /.form-container -->
              </div>
            </div>
            <!-- /.row -->
          </div>
          <!-- /.container -->
        </div>
        <!--// END Contact 3-1 -->
      </div>
    </section>
  </div>

Answer 1

您需要在链接中添加data-toggle="modal"和data-target="#modal"属性。
您需要将data-dismiss="modal"属性添加到您的关闭链接。

看到我的小提琴并阅读documentation：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<li><a data-toggle="modal" data-target="#modal">Contact</a></li>
<div class="modal" id="modal" role="dialog">
  <div class="modal__dialog">
    <section class="modal__content">
      <header class="modal__header">
        <h2 class="modal__title">
          <div style="margin: 0 0 0 30px;">Contact Us</div>
        </h2>
        <div style="margin: 4px 0 0 34px; color: white;">If you need to contact us, please use this form and we shall respond as soon as possible. Thanks</div>
        <a href="#" class="modal__close" data-dismiss="modal">&times;</a>
      </header>
      <div class="modal__body">
        <div class="content-block contact-3">
          <div class="container">
            <div class="row">
              <div class="col-md-8">
                <div id="contact" class="form-container">
                  <fieldset>
                    <div id="message"></div>
                    <form method="post" action="js/contact-form.php" name="contactform" id="contactform">
                      <div class="form-group">
                        <input name="name" id="name" type="text" value="" placeholder="Name" class="form-control" />
                      </div>
                      <div class="form-group">
                        <input name="email" id="email" type="text" value="" placeholder="Email" class="form-control" />
                      </div>
                      <div class="form-group">
                        <input name="phone" id="phone" type="text" value="" placeholder="Phone" class="form-control" />
                      </div>
                      <div class="form-group">
                        <textarea name="comments" id="comments" class="form-control" rows="3" placeholder="Message" id="textArea"></textarea>
                        <div class="editContent">
                          <p class="small text-muted"><span class="guardsman">* All fields are required.</span> Once we receive your message we will respond as soon as possible.</p>
                        </div>
                      </div>
                      <div class="form-group">
                        <button class="btn btn-default" type="button" class="modal" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary" type="submit" id="cf-submit" name="submit">Send</button>
                      </div>
                    </form>
                  </fieldset>
                </div>
                <!-- /.form-container -->
              </div>
            </div>
            <!-- /.row -->
          </div>
          <!-- /.container -->
        </div>
        <!--// END Contact 3-1 -->
      </div>
    </section>
  </div>

Answer 2

调用模态时的引用似乎是错误的。除此之外，莫代尔工作得很好。试试这个片段。

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row text-center">
  <a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#largeModal">Contact</a>
</div>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h2 class="modal__title">
          <div style="margin: 0 0 0 30px;">Contact Us</div>
        </h2>
        <div style="margin: 4px 0 0 34px; color: white;">If you need to contact us, please use this form and we shall respond as soon as possible. Thanks</div>
      </div>
      <div class="modal-body">
        <div class="content-block contact-3">
          <div class="container">
            <div class="row">
              <div class="col-md-8">
                <div id="contact" class="form-container">
                  <fieldset>
                    <div id="message"></div>
                    <form method="post" action="js/contact-form.php" name="contactform" id="contactform">
                      <div class="form-group">
                        <input name="name" id="name" type="text" value="" placeholder="Name" class="form-control" />
                      </div>
                      <div class="form-group">
                        <input name="email" id="email" type="text" value="" placeholder="Email" class="form-control" />
                      </div>
                      <div class="form-group">
                        <input name="phone" id="phone" type="text" value="" placeholder="Phone" class="form-control" />
                      </div>
                      <div class="form-group">
                        <textarea name="comments" id="comments" class="form-control" rows="3" placeholder="Message" id="textArea"></textarea>
                        <div class="editContent">
                          <p class="small text-muted"><span class="guardsman">* All fields are required.</span> Once we receive your message we will respond as soon as possible.</p>
                        </div>
                      </div>
                      <div class="form-group">
                        <button class="btn btn-default" type="button" class="modal" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary" type="submit" id="cf-submit" name="submit">Send</button>
                      </div>
                    </form>
                  </fieldset>
                </div>
                <!-- /.form-container -->
              </div>
            </div>
            <!-- /.row -->
          </div>
          <!-- /.container -->
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>






<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

＆＃13;

Answer 3

如果您使用的是$('.btn-outline-secondary').click(function() { $('iframe').attr('src', $(this).data('jobid')); });模式，则可以阅读他们的文档。您正在使用示例按钮：

bootstrap

<div class="form-group"> <button class="btn btn-default" type="button" class="modal" data-dismiss="modal">Close</button> <button class="btn btn-primary" type="submit" id="cf-submit" name="submit">Send</button> </div>是关闭模式的原因，因此您可以将链接设为：

data-dismiss="modal"

模态窗口未从按钮关闭

3 个答案: