如何在 bootstrap 中使用模型关闭按钮?
How to dismiss buttons with models works in bootstrap?
我想知道为什么当我将它与模型一起使用时关闭按钮不起作用。请访问下面的 link 并告诉我怎么可能?
http://builderfunding.co.in/doylesweb/index.html
这是代码 -
`
<button type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#myModal">My Booking</button>
<!-- Modal -->
<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">×</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>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#myModal1">How it Works?</button>
<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="myModal1" 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">×</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>
</div>
</div>
</div>
</div>
`
您好,因为您的 css 代码模型和模式背景都具有几乎相同的 z-index 值
.modal {
z-index: 1050;
}
.modal-backdrop{
z-index:1040;
}
删除 modal-backdrop z-index ,它将正常工作 (Bootstrap.min.css)
[ http://builderfunding.co.in/doylesweb/index.html ]
我想知道为什么当我将它与模型一起使用时关闭按钮不起作用。请访问下面的 link 并告诉我怎么可能?
http://builderfunding.co.in/doylesweb/index.html
这是代码 - `
<button type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#myModal">My Booking</button>
<!-- Modal -->
<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">×</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>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#myModal1">How it Works?</button>
<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="myModal1" 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">×</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>
</div>
</div>
</div>
</div>
`
您好,因为您的 css 代码模型和模式背景都具有几乎相同的 z-index 值
.modal {
z-index: 1050;
}
.modal-backdrop{
z-index:1040;
}
删除 modal-backdrop z-index ,它将正常工作 (Bootstrap.min.css) [ http://builderfunding.co.in/doylesweb/index.html ]