我有一个页面,我想启动2个不同的模态窗口。一个用于创建新用户,一个用于编辑现有用户。
我在一个可点击的表格中显示现有用户,并链接到我的模态#edit
,像这样:
<tr data-id="<?php echo $value['id'];?>" data-toggle="modal" data-target="#edit" class="open-edit">
打开Bootstrap模式对话框:
<div class="modal fade" id="edit">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
I ommited the rest of the code.. I grab this modal on its id="edit".
这是我想要的-当点击表项,模态对话框打开与我创建的表单。
现在我创建了这个模态对话框的精确副本,只将id="edit"
更改为id="create"
并创建了这个按钮:
<button class="btn btn-primary btn-me" data-toggle="modal" data-target="#create" >Create user<i class="fa fa-arrow-circle-right"></i></button>
我认为它现在会简单地打开我的第二个模态对话框命名为#create
,但相反,它空白的屏幕,就像当一个模态对话框显示-但没有显示任何模态窗口/对话框。
谁能帮助我理解为什么这是发生或我做错了什么?
此代码在同一页面中打开2个模态对话框
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal2">modal2</button>
<div class="modal hide fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<div class="modal hide fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
你需要把它放在两个不同的div上,它会工作的,我修复了它