Modal没有反应，并锁定屏幕上的所有内容

我正在尝试为用户进行日志记录。但是，当我的模态弹出时，所有内容（包括模式本身变得褪色或变灰）。无法点击模式上的背景或按钮。通常，我应该可以通过点击其他地方或模式的关闭按钮来解除模态。但现在，我无法以任何方式关闭它。我必须重新加载页面才能关闭模式。Modal没有反应，并锁定屏幕上的所有内容

两个脚本，我不得不加载拿到模式在所有工作：

<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

CSS代码，头-内，fh5co报头，和fh5co页：模态的与Z-指数大于页头元件更高

#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-指数大于页标头下：

来源

2016-09-07 Dr Confuse

-1

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

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

来源

2016-09-07 05:13:25 bala

巴拉，感谢您的回应，但似乎并没有问题。我更新了上面的代码以反映数据切换和数据目标，但我遇到了同样的问题。让我知道你是否需要额外的代码来诊断这个（如果是这样的话）。任何其他想法？ –

你能否给我提供你的css代码。并告诉我你面临的是什么类型的问题。只需拍摄一张屏幕即可发送。 – bala

嗨，我添加了屏幕截图和CSS代码。看一看，让我知道你能做些什么。谢谢！ –

Modal没有反应，并锁定屏幕上的所有内容

回答

相关问题