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沒有反應，並鎖定屏幕上的所有內容

回答

相關問題