Does Bootstrap has a maximum number of Modals allowed per page?
I have a total of 3 modals that will be used on the page.
1 is an modal-sm which will be used for Admin Login.
1 modal-lg which will be used as an Asset Add window.
and 1 modal-lg which will be used as an Asset Edit window
The Admin Login and Asset Addition window works. But when I try to open the Asset Edit window, the modal doesn't show up but the backdrop goes dark.
When I delete the Admin Login modal and the Asset addition window's code, the Asset Edit window works.
Please take note that as of the moment, Asset Addition and Asset Edit windows have exactly the same code. The Asset Addition works but the Asset Edit does not.
This just bugs me so hard. I'll really appreciate your assistance.
Admin Window:
<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>
Asset Add Window:
<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>
Asset Edit Window:
<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>
This just bugs me so hard. I'll really appreciate your assistance.
EDITED
There is no limit for Bootstrap Modals in one page.
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.