文章/答案/技术大牛

发布

问模态窗口不从按钮关闭
EN

Stack Overflow用户

提问于 2018-01-31 14:39:00

回答 3查看 60关注 0票数 0

我使用自定义模式窗口与窗体，不能关闭窗口从一个按钮。我尝试过各种数据选择--解雇，但仍然不起作用。我从菜单中启动该模式，单击li元素，如下所示：

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

这是正确的吗？

当单击；时间x时，我也很困惑为什么窗口会关闭。由于我是html5的新用户，如果有人能帮忙的话，我将不胜感激。非常感谢

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

html

twitter-bootstrap

twitter-bootstrap-3

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-01-31 14:59:24

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

看我的小提琴，读文档

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

票数 1

Stack Overflow用户

发布于 2018-01-31 15:06:18

调用模式的引用似乎是错误的。除此之外，模态是完美的。试试这个片段。

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

票数 1

Stack Overflow用户

发布于 2018-01-31 15:00:03

如果您使用的是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"是使模式关闭的原因，因此您可以将链接设置为：

<a href="#" class="modal__close" data-dismiss="modal">&times;</a>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48544752

复制

相似问题

问模态窗口不从按钮关闭
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模态窗口不从按钮关闭EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模态窗口不从按钮关闭
EN