javascript - 模式无响应并锁定屏幕上的所有内容

Question

我正在尝试创建一个用于登录用户的模式。但是，当我的模式弹出时，所有内容(包括模式本身都会褪色或变灰)。我无法单击任何内容，无论是背景还是模式上的按钮。通常，我应该能够通过单击其他地方或模态的关闭按钮来关闭模态。但现在，我无法以任何方式关闭它。我必须重新加载页面才能关闭模式。

我必须加载两个脚本才能使模式正常工作:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这是我的模式代码:

  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content" style="z-index:99999999;">
        <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">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

这是调用模态的链接:

<div id="fh5co-page">
<header id="fh5co-header" role="banner" style="Border-bottom:solid;position:fixed;border-width:1px;background-color:rgba(127,127,127,0.85);">
    <div class="container">
        <div class="header-inner">
            <a href="#"><img alt="XYZ" class="img-responsive" src="{% static 'assets/images/XYZimage.png' %}" style="float:left;height:70px;width:180px;"></a>
<nav role="navigation" style="float:right;margin-top:4%;">
                <ul>
                    <li><a href="about.html">View Packages</a></li>
                    <li><a href="about.html">Try a test!</a></li>
                    <li class="cta"><a href="#" data-toggle="modal" data-target="#myModal">Open Modal</a></li>
                </ul>
            </nav>
            <div style="clear:both;"></div>
</div>
        </div>
    </header>

这里需要改变什么？请帮忙!谢谢!

截图:

类 cta、header-inner、fh5co-header 和 fh5co-page 的 CSS 代码:

#fh5co-header nav ul li.cta {
  margin-left: 20px;
}
#fh5co-header nav ul li.cta a {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  border: 2px solid rgba(255, 255, 255, 0.7);
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
}
#fh5co-header nav ul li.cta a:hover {
  background: #fff;
  color: #00B906;
}
#fh5co-header nav ul li.cta a:hover:after {
  display: none;
}
#fh5co-offcanvas ul li.cta {
  margin-left: 0;
  margin-top: 20px;
  display: block;
  float: left;
}
#fh5co-offcanvas ul li.cta a {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  border: 2px solid rgba(255, 255, 255, 0.7);
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
}
#fh5co-offcanvas ul li.cta a:hover {
  background: #fff;
  text-decoration: none;
}
#fh5co-offcanvas ul li.cta a:hover:after {
  display: none;
}


#fh5co-page {
  position: relative;
  z-index: 2;
  background: #fff;
}

#fh5co-offcanvas, .fh5co-nav-toggle, #fh5co-page {
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

#fh5co-offcanvas, .fh5co-nav-toggle, #fh5co-page {
  position: relative;
}

#fh5co-page {
  z-index: 2;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.offcanvas-visible #fh5co-page {
  -moz-transform: translateX(-275px);
  -webkit-transform: translateX(-275px);
  -ms-transform: translateX(-275px);
  -o-transform: translateX(-275px);
  transform: translateX(-275px);
}



#fh5co-header {
  position: absolute;
  z-index: 1001;
  width: 100%;
  margin: 10px 0 0 0;
}
@media screen and (max-width: 768px) {
  #fh5co-header {
    margin: 0px 0 0 0;
  }
}
#fh5co-header .header-inner {
  height: 70px;
  /* padding-left: 20px;
  padding-right: 20px; */
  float: left;
  width: 100%;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
}
#fh5co-header h1 {
  float: left;
  padding: 0;
  font-weight: 700;
  line-height: 0;
  font-size: 30px;
}
#fh5co-header h1 a {
  color: white;
}
#fh5co-header h1 a > span {
  color: #00B906;
}
#fh5co-header h1 a:hover, #fh5co-header h1 a:active, #fh5co-header h1 a:focus {
  text-decoration: none;
  outline: none;
}
#fh5co-header h1, #fh5co-header nav {
  /* margin: 38px 0 0 0; */
  margin: 0 0 0 0;
}
#fh5co-header nav {
  float: right;
  padding: 0;
}
@media screen and (max-width: 768px) {
  #fh5co-header nav {
    display: none;
  }
}
#fh5co-header nav ul {
  padding: 0;
  margin: 0 -0px 0 0;
  line-height: 0;
}
#fh5co-header nav ul li {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
#fh5co-header nav ul li a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  padding: 10px;
  position: relative;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
#fh5co-header nav ul li a i {
  line-height: 0;
  font-size: 20px;
  position: relative;
  top: 3px;
}
#fh5co-header nav ul li a:after {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 7px;
  left: 10px;
  right: 10px;
  background-color: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#fh5co-header nav ul li a:hover {
  text-decoration: none;
  color: white;
}
#fh5co-header nav ul li a:hover:after {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}
#fh5co-header nav ul li a:active, #fh5co-header nav ul li a:focus {
  outline: none;
  text-decoration: none;
}
#fh5co-header nav ul li.cta {
  margin-left: 20px;
}
#fh5co-header nav ul li.cta a {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  border: 2px solid rgba(255, 255, 255, 0.7);
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
}
#fh5co-header nav ul li.cta a:hover {
  background: #fff;
  color: #00B906;
}
#fh5co-header nav ul li.cta a:hover:after {
  display: none;
}
#fh5co-header nav ul li.active a {
  text-decoration: none;
  color: white;
}
#fh5co-header nav ul li.active a:after {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}

Z-index 高于页眉元素的 Modal 屏幕截图:

Z-index 低于页眉的 Modal 屏幕截图:

Answer 1

这里是引导模态函数的更新代码。

<a href="#" class="btn btn-primary btn-outline with-arrow"  data-toggle="modal" data-target="#myModal" id="ppu-start">Get started <i class="icon-arrow-right"></i></a>

您没有添加 data-toggle 和 data-taget 属性。如果你添加这个，关闭按钮工作正常。