html - 模式打开时无法单击导航栏和正文

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

检查工作 fiddle :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;
}