Bootstrap是否具有每页允许的最大模态数量?
我总共有3种模式,将在页面上使用。
1是modal-sm
,将用于管理员登录。
1 modal-lg
,它将用作“资产添加”窗口。
和1个modal-lg
用作资产编辑窗口
“管理员登录和资产添加”窗口将起作用。但是,当我尝试打开“资产编辑”窗口时,模态框未显示,但背景变暗了。
当我删除“管理员登录”模式和“资产添加”窗口的代码时,“资产编辑”窗口将起作用。
请注意,到目前为止,“资产添加”和“资产编辑”窗口具有完全相同的代码。资产添加有效,但资产编辑无效。
这真让我很烦。非常感谢您的协助。
管理窗口:
<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>
这真让我很烦。非常感谢您的协助。
编辑
答案 0 :(得分:0)
一页中没有Bootstrap Modal的限制。
所有API方法都是异步的,并开始过渡。一旦转换开始但转换结束之前,它们将返回给呼叫者。另外,将忽略对过渡组件的方法调用。