模态没有响应并锁定屏幕上的所有内容答案

【问题标题】：Modal is unresponsive and locks everything on screen模态没有响应并锁定屏幕上的所有内容
【发布时间】：2020-06-08 03:21:06
【问题描述】：

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

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

<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 屏幕截图：

【问题讨论】：

标签： javascript jquery html modal-dialog bootstrap-modal

【解决方案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-tget 属性。如果你添加这个，关闭按钮工作正常。

【讨论】：

巴拉，感谢您的回复，但这似乎不是问题。我更新了上面的代码以反映数据切换和数据目标，但我遇到了同样的问题。让我知道您是否需要额外的代码来诊断这个（如果需要，哪个）。还有其他想法吗？
你能给我你的css代码吗？并告诉我你面临什么类型的问题。只需截屏并发送。
您好，我已经添加了屏幕截图和 CSS 代码。看看，让我知道你能做些什么。谢谢！
在我的系统中它工作正常。模态窗口显示单独的而不是灰色的模态窗口。可能是你的body标签代码需要添加一些东西。您是否为页面或模式添加了任何 z-index 值？因为它只会影响那个原因。
我玩过 Z-index。这也不是问题 - z-index 较低时，模式位于页面元素下方，而 z-index 较高时，模式出现在上方。在这两种情况下，Modal 和页面都是灰色的并被锁定。见截图。我在模态父 div、模态对话框 div 和模态内容 div 上应用了 z-index，并且模态上的任何地方都没有 z-index。所有的案例都有同样的问题——一切都被锁定了。巴拉，当您考虑到这一点时，请标记或与您认识的任何可以帮助解决此问题的人分享。谢谢！

【解决方案2】：

在您的 html 代码结束后放置模态框。然后将下面的代码放在你的 css 上。

.modal-backdrop {
/* bug fix - no overlay */    
display: none;}

【讨论】：