Question

我正在尝试将模式添加到HTML页面，但无法将模式添加到前面，我已经复制了bootstrap示例代码。

我还试图保留 JSFiddle ，虽然它在 JSFiddle 中工作，但不在我的程序中。

因此，展示整个代码会更好：

＆＃13;

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

＆＃13;

它应该像这样工作但是，在我的代码中将生成这种类型的输出... Image link

希望得到帮助......

Answer 1

“.modal-backdrop”的默认 z-index 值1040似乎被自定义CSS样式覆盖。确保“.modal-backdrop”的z-index设置为 1040 。

bootstrap模态显示在背景中

1 个答案: