Bootstrap 模态问题(无法显示第二个模态)
Bootstrap modal issue (not able to show the second modal)
所以我有两个模式,它们根据我单击的按钮触发
第一个是这样触发的:
<a id="de_details" data-toggle="modal" data-target=".show-de-banks"> </a>
它是这样建造的
<div class="modal fade show-de-banks" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
bla bla
<div class="modal-body">
bla bla
</div>
<div class="modal-footer">
bla bla
</div>
</div>
</div>
</div>
使用按钮调用第二个:
<button class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>
它的构建方式相同:
<div class="modal fade open-dialog" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
dsfgdfg
</div>
<div class="modal-body">
sdgfsdgsd
</div>
<div class="modal-footer">
sdfds
</div>
</div>
</div>
</div>
当我打开第一个时,没有问题。
但是当我想打开第二个时,它一出现就消失了。
我知道:
- 我只需要包含一个 js bootstrap 文件
- 我的脚本必须放在最后(为了页面快速加载)
我错过了什么吗?
正如 Ubiquitous Developers 的评论所说,您应该将按钮 type
设为 button
<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>
所以我有两个模式,它们根据我单击的按钮触发
第一个是这样触发的:
<a id="de_details" data-toggle="modal" data-target=".show-de-banks"> </a>
它是这样建造的
<div class="modal fade show-de-banks" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
bla bla
<div class="modal-body">
bla bla
</div>
<div class="modal-footer">
bla bla
</div>
</div>
</div>
</div>
使用按钮调用第二个:
<button class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>
它的构建方式相同:
<div class="modal fade open-dialog" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
dsfgdfg
</div>
<div class="modal-body">
sdgfsdgsd
</div>
<div class="modal-footer">
sdfds
</div>
</div>
</div>
</div>
当我打开第一个时,没有问题。
但是当我想打开第二个时,它一出现就消失了。
我知道:
- 我只需要包含一个 js bootstrap 文件
- 我的脚本必须放在最后(为了页面快速加载)
我错过了什么吗?
正如 Ubiquitous Developers type
设为 button
<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>