Javascript 引导多模式按钮
我有四个网格,在每个网格中我有一个按钮,我想有自己独特的模式。然而,每当我尝试使用Bootstrap的modals时,我只会显示第一个按钮的数据,即使我可能会单击另一个按钮,该按钮应该显示不同的模态 我第一次使用modals,所以我直接基于Bootstrap网站上的示例。我将下面的代码复制了四次,唯一的区别是按钮的名称、模式标题和模式主体。谁能告诉我,为了在同一页中有四个独特的情态动词,我需要修改什么Javascript 引导多模式按钮,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我有四个网格,在每个网格中我有一个按钮,我想有自己独特的模式。然而,每当我尝试使用Bootstrap的modals时,我只会显示第一个按钮的数据,即使我可能会单击另一个按钮,该按钮应该显示不同的模态 我第一次使用modals,所以我直接基于Bootstrap网站上的示例。我将下面的代码复制了四次,唯一的区别是按钮的名称、模式标题和模式主体。谁能告诉我,为了在同一页中有四个独特的情态动词,我需要修改什么 <div class="col-md-3"> <div cl
<div class="col-md-3">
<div class="head">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Button1</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">First Log</h4>
</div>
<div class="modal-body">
Test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="mediumSpacer"></div>
</div>
按钮1
&时代;
第一日志
试验
接近
每个模式应具有不同的id,每个按钮的数据目标应为每个模式的id
例如:
<div id="myModal1"class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">....</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
</div>
</div>
<div id="myModal2"class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">....</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
</div>
</div>
....
...
...
....
...
...
每个按钮应类似于:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">Button1</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">Button1</button>
按钮1
按钮1
只需更改按钮中的数据目标,使其与模式中的id匹配即可