Question

目前我在网页底部使用模态弹出窗口。

    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="index.html">Home</a></li>
      <li><a href="page1.html">Page 1</a></li>
    </ul>
  </div>
</nav>

<div class="modal fade" id="slide-bottom-popup"  data-backdrop="false">
    <div class="modal-body">
        <button id="close" type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4>Cennos Commandments</h4>
        <ul>
            <li>Commandments 1</li>
            <li>Commandments 2</li>
            <li>Commandments 3</li>
            <li>Commandments 4</li>
        </ul>
    </div><!-- /.modal-body -->
</div><!-- /.modal -->

模态的CSS

.modal.fade.in .modal-body {
    bottom: 0; 
    opacity: 1;
}
.modal-body {
    position: absolute;
    bottom: -250px;
    right: 0%;
    padding: 30px 15px 15px;
    width: 275px;
    height: 250px;
    background-color: #e5e5e5;
    border-radius: 6px 6px 0 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
    transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
}
.close {
    margin-top: -20px;
    text-shadow: 0 1px 0 #ffffff;
}
body.modal-open {
    overflow: scroll;
}

在页面加载时打开它的脚本

$(document).ready(function() {
setTimeout(function() {
  $('#slide-bottom-popup').modal('show');
}, 0); // milliseconds
});

我意识到我必须首先关闭模态才能点击或选择正文或导航栏以转到其他页面。无论如何，我可以保持模态打开，同时仍然可以使用body，nav-bar。

抱歉我的英语不好。谢谢你。

Answer 1

查看工作小提琴：https://jsfiddle.net/NayanaDas/02u302v4/。覆盖模态类：

.modal {
    position: inherit;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0px;
}

当模态打开时，无法单击导航栏，正文

1 个答案: