javascript - 我有一个 Bootstrap 模式问题 - 页面加载一半

Question

我在一个网站上有几个模式，一旦我搞砸了，它们会在桌面 View 中加载中心页面，但在重新打开元素后，它有时会只加载页面的左半部分，而右半部分被切断页面就好像它被设置为具有 position:right 属性一样。我没有更改 css 或 js 的 Bootstrap 模式部分，并且除了 Bootstrap 之外我没有使用任何其他东西。我创建了一个类来添加到模态以添加每个可能的中心对齐属性

.ALmodal{
	align-content:center;
	align-items: center;
	align-self: center;
}
    .iframe-container {    
    padding-bottom: 60%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.iframe-container iframe,
.iframe-container object,
.iframe-container embed{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal.in .modal-dialog {
  transform: none; /*translate(0px, 0px);*/
}

<div class="container">
  <!-- Trigger the modal with a button -->
<center>  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#schd">Open Large Modal</button></center>

  <!-- Modal -->
         <center><div class="modal fade ALmodal" id="schd" role="dialog">
    <div class="modal-dialog modal-lg">
      <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">
            <object width="100%" height="500" data="/img/Primal-Kickboxing-2014-Schedule.pdf" >
            </object>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
            </center>
    </div>
             

这是我在单独的 css 文件中的其他与模态相关的 css

Answer 1

我会避免添加干扰标准 BS 类的额外类，尤其是当它们像您的 ALmodal 那样与间距有关时。

我这里做了一个默认的BS Modal，看代码。它也适用于移动设备。问题是，模态框默认由 BS 居中。所以没有必要制作一个告诉它再次居中的类(class)。那可能搞砸了。使用标准类(class)并从那里开始学习。

http://www.bootply.com/9LUdALseVe

你还想看看 BS Helper Classes .在那里你看到一个部分 Center content blocks ，请查看它以了解如何将内容居中。

请不要忘记不支持模态框之上的模态框。参见 here .

如果您必须同时打开两个模式，请查看here .尽管从 UI 或 UX 的 Angular 我真的不推荐这样做。让您的设计易于理解和遵循。尝试基本的东西并从那里开始。

希望对您有所帮助。如果我在任何一点上都错了，请告诉我，这样我就可以避免以后再犯同样的错误。谢谢。