Начальная загрузка откройте 2 разных модальных диалога на одной странице
У меня есть страница, на которой я хочу запустить 2 разных модальных окна. Один для создания новых пользователей и один для редактирования существующих пользователей.
Я показываю существующих пользователей в интерактивной таблице и ссылаюсь на свой модальный #edit
следующим образом:
<tr data-id="<?php echo $value['id'];?>" data-toggle="modal" data-target="#edit" class="open-edit">
Это открывает мой модальный диалог начальной загрузки:
<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
, но вместо этого он закрывает экран, как при отображении модального диалога, но без отображения какого-либо модального окна/диалога.
Может ли кто-нибудь помочь мне понять, почему это происходит или что я делаю неправильно?
1 answers
Этот код открывает 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>