Максимальное количество модальных окон в Bootstrap PHP
Есть ли в Bootstrap максимальное количество модальных окон на странице?
Всего у меня есть 3 модальных окна, которые будут использоваться на странице.
1 — это modal-sm, который будет использоваться для входа администратора.
1 modal-lg, который будет использоваться в качестве окна добавления актива.
и 1 modal-lg, который будет использоваться в качестве окна редактирования активов.
Окно входа администратора и добавления активов работает. Но когда я пытаюсь открыть окно редактирования активов, модальное окно не отображается, а фон темнеет.
Когда я удаляю модальное окно входа администратора и код окна добавления актива, окно редактирования актива работает.
Обратите внимание, что на данный момент окна Asset Adding и Asset Edit имеют одинаковый код. Добавление активов работает, а редактирование активов — нет.
Это меня так сильно раздражает. Я буду очень признателен за вашу помощь.
Окно администратора:
<div class = "modal fade" id = "adminModal" role = "dialog">
<div class = "modal-dialog modal-sm">
<div class = "modal-content">
<div style = "padding-top:20px;">
<center>
<img src = "TISAMI2.png" style = "height:100px;">
<br><br>
<h4 class = "modal-title" style = "font-family:'Encode Sans Expanded'; font-weight:600;">Admin Login</h4>
<div class = "modal-body">
<br>
<form action=adminlogin.php method=POST>
<p><span style = "font-family:'Encode Sans Expanded';">Username</span>
<br><input type=text name = "username">
</p>
<p><span style = "font-family:'Encode Sans Expanded';">Password</span>
<br><input type=password name = "password">
<p>
<br>
</center>
</div>
<div class = "modal-footer">
<input type=submit class = "btn btn-Success" value=Sign-In>
</form>
<button type = "button" class = "btn btn-default" data-dismiss = "modal">Close</button>
</div>
</div>
</div>
</div>
Окно добавления актива:
<div class = "modal fade" id = "addDLModal" role = "dialog">
<div class = "modal-dialog modal-lg">
<div class = "modal-content">
<div style = "padding-top:20px; padding-right:20px; padding-left:20px; min-width:800px;">
<center>
<img src = "TISAMI2.png" style = "height:100px;">
<BR><BR>
<h4 class = "modal-title" style = "font-family:'Encode Sans Expanded'; font-weight:600;">Desktop and Laptop Asset Information</h4>
</center>
<div class = "modal-body">
<br>
<form>
<p><span style = "font-family:'Encode Sans Expanded';">Status:</span>
<select class=dlStatus id=dlStatus disabled>
<option>IN STOCK
<option>IN USE
</select>
<p><span style = "font-family:'Encode Sans Expanded';">Asset Information</span>
<table style = "width:100%; margin-left:20px;">
<tr>
<td width=20%>Unit Type:
<td width=20%><input type=text class=dlType id=dlType disabled>
<!-- <td width=20%><div class=dlType id=dlType> -->
<td width=20%>Computer Name:
<td width=20%><input type=text class=dlCName id=dlCName disabled>
</tr>
<tr>
<td>Brand:
<td><input type=text class=dlBrand id=dlBrand disabled>
<td>Model:
<td><input type=text class=dlModel id=dlModel disabled>
</tr>
<tr>
<td>Asset Tag:
<td><input type=text class=dlAssetTag id=dlAssetTag disabled>
<td>Remarks:
<td><input type=text class=dlPlus id=dlPlus disabled>
</tr>
<tr>
<td>Serial No.:
<td><input type=text class=dlSerialNo id=dlSerialNo disabled>
<td>Overall Condition:
<td><input type=text class=dlOACondition id=dlOACondition>
</tr>
<tr>
<td>MAC Address:
<td><input type=text class=dlMAC id=dlMAC disabled>
<td>Useable:
<td><input type=text class=dlUse id=dlUse>
</tr>
</table>
<p><span style = "font-family:'Encode Sans Expanded';">User Information</span>
<table style = "width:100%; margin-left:20px;">
<tr>
<td width=20%>IGG:
<td width=20%><input type=text class=dlIGG id=dlIGG>
<td width=20%>Full Name:
<td width=20%><input type=text class=dlFullName id=dlFullName>
</tr>
<tr>
<td>Department:
<td><input type=text class=dlDepartment id=dlDepartment>
<td>Office:
<td><input type=text class=dlOffice id=dlOffice>
</tr>
</table>
<p><span style = "font-family:'Encode Sans Expanded';">Accessories Details</span>
<table style = "width:100%; margin-left:20px;">
<tr>
<td width=16%>Keyboard:
<td width=16%><input type=checkbox class=dlKeyboard id=dlKeyboard>
<td width=16%>Mouse:
<td width=16%><input type=checkbox class=dlMouse id=dlMouse>
<td width=16%>Charger:
<td width=16%><input type=checkbox class=dlCharger id=dlCharger>
</tr>
<tr>
<td>Bag:
<td><input type=checkbox class=dlBag id=dlBag>
<td>Docking Station:
<td><input type=checkbox class=dlDockingStation id=dlDockingStation>
<td>UPS:
<td><input type=checkbox class=dlUPS id=dlUPS>
</tr>
<tr>
<td>Monitor 1:
<td><input type=checkbox class=dlMonitor1 id=dlMonitor1>
<td>Monitor 2:
<td><input type=checkbox class=dlMonitor2 id=dlMonitor2>
<td>
<td>
</tr>
</table>
<p><span style = "font-family:'Encode Sans Expanded';">Previous Owner Information</span>
<table style = "width:100%; margin-left:20px;">
<tr>
<td width=20%>Employee Number:
<td width=20%><input type=text class=dlPrevIGG id=dlPrevIGG>
<td width=20%>Full Name:
<td width=20%><input type=text class=dlPrevName id=dlPrevName>
</tr>
</table>
</form>
<br>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-success" data-dismiss = "modal">Save</button>
<button type = "button" class = "btn btn-default" data-dismiss = "modal">Close</button>
</div>
</div>
</div>
</div>
Окно редактирования актива:
<div class = "modal fade" id = "editDLModal" role = "dialog">
<div class = "modal-dialog modal-lg">
<div class = "modal-content">
<div style = "padding-top:20px; padding-right:20px; padding-left:20px; min-width:800px;">
<center>
<img src = "TISAMI2.png" style = "height:100px;">
<BR><BR>
<h4 class = "modal-title" style = "font-family:'Encode Sans Expanded'; font-weight:600;">Desktop and Laptop Asset Information</h4>
</center>
<div class = "modal-body">
<br>
<form>
<p><span style = "font-family:'Encode Sans Expanded';">Status:</span>
<select class=dlStatus id=dlStatus disabled>
<option>IN STOCK
<option>IN USE
</select>
<p><span style = "font-family:'Encode Sans Expanded';">Asset Information</span>
<table style = "width:100%; margin-left:20px;">
<tr>
<td width=20%>Unit Type:
<td width=20%><input type=text class=dlType id=dlType disabled>
<!-- <td width=20%><div class=dlType id=dlType> -->
<td width=20%>Computer Name:
<td width=20%><input type=text class=dlCName id=dlCName disabled>
</tr>
<tr>
<td>Brand:
<td><input type=text class=dlBrand id=dlBrand disabled>
<td>Model:
<td><input type=text class=dlModel id=dlModel disabled>
</tr>
<tr>
<td>Asset Tag:
<td><input type=text class=dlAssetTag id=dlAssetTag disabled>
<td>Remarks:
<td><input type=text class=dlPlus id=dlPlus disabled>
</tr>
<tr>
<td>Serial No.:
<td><input type=text class=dlSerialNo id=dlSerialNo disabled>
<td>Overall Condition:
<td><input type=text class=dlOACondition id=dlOACondition>
</tr>
<tr>
<td>MAC Address:
<td><input type=text class=dlMAC id=dlMAC disabled>
<td>Useable:
<td><input type=text class=dlUse id=dlUse>
</tr>
</table>
<p><span style = "font-family:'Encode Sans Expanded';">User Information</span>
<table style = "width:100%; margin-left:20px;">
<tr>
<td width=20%>IGG:
<td width=20%><input type=text class=dlIGG id=dlIGG>
<td width=20%>Full Name:
<td width=20%><input type=text class=dlFullName id=dlFullName>
</tr>
<tr>
<td>Department:
<td><input type=text class=dlDepartment id=dlDepartment>
<td>Office:
<td><input type=text class=dlOffice id=dlOffice>
</tr>
</table>
<p><span style = "font-family:'Encode Sans Expanded';">Accessories Details</span>
<table style = "width:100%; margin-left:20px;">
<tr>
<td width=16%>Keyboard:
<td width=16%><input type=checkbox class=dlKeyboard id=dlKeyboard>
<td width=16%>Mouse:
<td width=16%><input type=checkbox class=dlMouse id=dlMouse>
<td width=16%>Charger:
<td width=16%><input type=checkbox class=dlCharger id=dlCharger>
</tr>
<tr>
<td>Bag:
<td><input type=checkbox class=dlBag id=dlBag>
<td>Docking Station:
<td><input type=checkbox class=dlDockingStation id=dlDockingStation>
<td>UPS:
<td><input type=checkbox class=dlUPS id=dlUPS>
</tr>
<tr>
<td>Monitor 1:
<td><input type=checkbox class=dlMonitor1 id=dlMonitor1>
<td>Monitor 2:
<td><input type=checkbox class=dlMonitor2 id=dlMonitor2>
<td>
<td>
</tr>
</table>
<p><span style = "font-family:'Encode Sans Expanded';">Previous Owner Information</span>
<table style = "width:100%; margin-left:20px;">
<tr>
<td width=20%>Employee Number:
<td width=20%><input type=text class=dlPrevIGG id=dlPrevIGG>
<td width=20%>Full Name:
<td width=20%><input type=text class=dlPrevName id=dlPrevName>
</tr>
</table>
</form>
<br>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-success" data-dismiss = "modal">Save</button>
<button type = "button" class = "btn btn-default" data-dismiss = "modal">Close</button>
</div>
</div>
</div>
</div>
Это меня так сильно раздражает. Я буду очень признателен за вашу помощь.
ОТРЕДАКТИРОВАНО
catcon, я добавил скрипты. пожалуйста, продолжайте. Спасибо
—
10.07.2019 08:32
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
0
2
363
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Модальные окна Bootstrap на одной странице не ограничены.
- Проверьте, имеют ли ваши модальные окна похожий идентификатор или имя.
- Проблема может быть в переходах. Пожалуйста, обратитесь к ссылка: https://getbootstrap.com/docs/4.2/components/modal/#методы
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
Можно, я проверю. Но даже первое, что я открываю после обновления веб-страницы, — это окно редактирования активов, оно по-прежнему не показывает модальное окно, и происходит фон, поэтому я немного сомневаюсь, что это связано с переходом.
—
10.07.2019 08:31
Я предлагаю вам сохранить один модальный элемент и переключать заголовок и тело DIV модального окна в соответствии с ролями.
—
10.07.2019 08:33
Это может сработать. Я думал продолжить использование jquery и innerhtml, но это займет огромный кусок. Я надеюсь, что вместо этого мы сможем использовать несколько модальных окон, потому что это было бы намного проще и эффективнее.
—
10.07.2019 08:40
Jquery слишком тяжел для модальных окон. Я твердо чувствую, что существует проблема перехода с несколькими модальными окнами. Вы можете отладить его, используя инструмент мигания краски, чтобы проверить, не является ли это проблемой перехода. Было бы неплохо переключить свойство отображения DIV вместо создания тяжелых переходов для каждого модального окна.
—
10.07.2019 08:51
Ну да, я просто кое о чем подумал. Вероятно, мы можем продолжить использование видимости DIV. но иметь в общей сложности 4 функции (3 скрытых, 1 отображаемую) в модальном окне также было бы довольно тяжело, не так ли?
—
10.07.2019 09:09
Другие вопросы по теме
Модальное текстовое поле не загружает атрибут данных с кнопки, на которую он был нажат
Конфликт модального фона и выпадающего меню
Как использовать adminlte modal в laravel?
ReactJS и автофокус
Datepicker очищает значение модальных данных
Как управлять последней модальной кнопкой мастера начальной загрузки
Использование Materialise Cards конфликтует с модальным представлением
Раздражающая ошибка Bootstrap 4 modal-body bg-color с шириной
Модальное окно Bootstrap срабатывает дважды при закрытии и повторном открытии
ASP.NET MVC «Создать» действие в Bootstrap Modal для обновления индекса из отдельного представления/контроллера
Похожие вопросы
Транзакция Laravel не откатывается, если не происходит исключения БД
Есть ли способ интегрировать списки SharePoint с веб-сайтом/веб-приложением для выполнения операций ЧТЕНИЕ/ЗАПИСЬ?
PHP: получить сумму разных дат в массиве
Настройка Laravel vhosts в xampp работает только для первой страницы
Axios получает результат array_filter как объект вместо массива
Как я могу найти разницу массивов, имеющих разный формат
Соответствие запроса для целочисленного числа в эластичном поиске с Laravel
Как создать документ solr с типом String, используя запрос солярия
PHP - цикл в трехмерном массиве дает проводной вывод
Нарушение ограничения целостности, соединяющее таблицы MySql
Количество модальных окон на одной странице не ограничено. Вы сказали, что «Asset Add» и «Asset Edit» имеют точно такой же код, имеют ли они одинаковый идентификатор. Пожалуйста, поделитесь кодом.