bootstrap模式顯示在背景中

-2

我正在嘗試向HTML頁面添加模式，但無法將模式添加到前面，我複製了引導程序示例代碼。bootstrap模式顯示在背景中

我也試圖保持的jsfiddle，雖然它的工作在的jsfiddle，而不是在我的計劃。

所以這是更好地展示整個代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
\t Launch demo modal 
 
\t </button> 
 

 
\t <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
\t <div class="modal-dialog" role="document"> 
 
\t \t <div class="modal-content"> 
 
\t \t <div class="modal-header"> 
 
\t \t \t <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
\t \t \t <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
\t \t </div> 
 
\t \t <div class="modal-body"> 
 
\t \t \t ... 
 
\t \t </div> 
 
\t \t <div class="modal-footer"> 
 
\t \t \t <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
\t \t \t <button type="button" class="btn btn-primary">Save changes</button> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t </div>

它應該像這樣工作，但是，在我的代碼這種類型的輸出將產生... Image link

希望有所幫助...

來源

2017-02-16 Sagar Panchal

請提供更多信息，例如您的css，因爲它很可能是您在css中添加的東西（例如z-index） – d3orn

請提供儘可能大的代碼塊，它可以證明問題 – Banzay

（http： /maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js），我將其更改爲（http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min .js），現在它工作正常，所以我不需要更改z-index或任何CSS文件。 @Banzay –

看來默認z-index'.modal-backdrop'的值爲1040正被您的自定義CSS樣式覆蓋。確保'.modal-backdrop'的z-index設置爲。

來源

2017-02-16 10:22:58

我不認爲這是問題，我檢查了bootstrap.min.css＆'.modal-backdrop'z-index值僅爲1040。我不知道是問題，但** bootstap JS **文件版本解決了我的問題 –

bootstrap模式顯示在背景中

回答

相關問題