html – 覆盖整个设备屏幕的模态

概述我正在尝试设计一个覆盖设备整个宽度的模态.这是我的尝试： <!-- Modal --> <div class="container-fluid modal fade bd-example-modal-lg" style=" max-width: 100vw;" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleMo 我正在尝试设计一个覆盖设备整个宽度的模态.这是我的尝试：

<!-- Modal -->  <div   ID="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hIDden="true">    <div  role="document">      <div >        <div >          <h5  ID="exampleModalLabel">PrevIEw</h5>          <button type="button"  data-dismiss="modal" aria-label="Close">            <span aria-hIDden="true">&times;</span>          </button>        </div>        <div    ID="result">        </div>        <div >          <button type="button"  data-dismiss="modal">OK</button>        </div>      </div>    </div>  </div>  <!--MODAL-->

这就是我得到的：
Output

解决方法 在最新的bootstrap 4中创建全屏模式与在bootstrap 3中的 previous answer不同.

.modal-full {    min-wIDth: 100%;    margin: 0;}.modal-full .modal-content {    min-height: 100vh;}

然后将modal-full类添加到模态：

<div  ID="myModal" tabindex="-1" role="dialog" aria-hIDden="true">    <div  role="document">        <div >        ...        </div>    </div></div>

演示：Bootstrap 4 Full Screen Modal

总结

以上是内存溢出为你收集整理的html – 覆盖整个设备屏幕的模态全部内容，希望文章能够帮你解决html – 覆盖整个设备屏幕的模态所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。