Bootstrap PHP中的最大模态数

时间:2019-07-10 06:19:56

标签: php bootstrap-modal

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>

这真让我很烦。非常感谢您的协助。

编辑

1 个答案:

答案 0 :(得分:0)

一页中没有Bootstrap Modal的限制。

  1. 检查模态是否具有相似的ID或名称。
  2. 问题可以在转换之内。请参考 链接:https://getbootstrap.com/docs/4.2/components/modal/#methods
  

所有API方法都是异步的,并开始过渡。一旦转换开始但转换结束之前,它们将返回给呼叫者。另外,将忽略对过渡组件的方法调用。