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模式显示在背景中

回答

相关问题