Question

我正在使用Bootstrap Modal快速弹出我的新闻。

目前，点击链接时遇到问题;它只显示一个方框。它不是全屏的。

我的问题很简单：有任何方法可以将width和height类包含modal添加到body以显示全屏。

我认为因为它是另一位父母的孩子。并且它无法显示全屏。

有任何方法可以显示div类是全屏还是依赖任何父元素？

像这样构建我的代码：

＆＃13;

.contentfit {
    height: 100%;
    position: relative;
}

.right-content {
    background-color: #5AA258;
    float: left;
    width: 70%;
    height: 100%;
    padding-left: 30px !important;
    padding-right: 30px !important;
    display: flex;
    justify-content: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="section">
  <div class="contentfit">
    <div class="right-content">
      <section id="hoicho">
        <div class="title">
          <h2>The title</h2>
        </div>
        <div class="services">
          <ul>
            <li>Services 1</li>
            <li>Services 2</li>
          </ul>
        </div>
        <div class="wrap">
          <div class="frameallcontent">
            <div class="containter">
              <div class="row">
                <div class="col-md-2">
                  
                </div>
                <div class="col-md-10">
                  <p class="title-p"> <a href="javascript:void(0,0)" data-toggle="modal" data-target="#tintuchoicho">Click to link</a>
                  </p>
                  <!-- Modal -->
                  <div class="modal fullscreen-modal fade" id="tintuchoicho" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
                          ...
                        </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>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="left-content">
      
    </div>
  </div>
</div>

＆＃13;

我只展示了我的部分代码。

你可以看到我的实例看起来像这样。

当我点击链接下划线时，它只显示这样的小弹出窗口。

Answer 1

在关闭</body>之前，将此脚本放在页面底部。

$(window).on('load', function(){
  $('.modal.fade').appendTo('body');
})

它会有效地将你的模态从它们放置的任何地方移开，使它们成为<body>的直接子项。

如果这不起作用，则表示您覆盖了.modal的默认CSS，您需要在此处或使用任何在线代码段工具生成一个最小，完整且可验证的问题示例。< / p>

Answer 2

Bootstraps文档说：

模态标记展示位置 总是尝试将模态的HTML代码放入文档中的顶级位置以避免其他组件影响模态的外观和/或功能。

从这里采取：http://getbootstrap.com/javascript/#modals

因此，如果可能的话，我建议将其从文档中移到关闭</body>标记之前。这应该可以解决你的问题。

Bootstrap Modal不显示全屏

2 个答案: