Si vous avez besoin d'utiliser des boîtes modales au travail, vous pouvez jeter un œil à
<p class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <p class="modal-dialog"> <p class="modal-content"> <p class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnCancel"> × </button> <h4 class="modal-title" id="myModalLabel"> 前台菜单管理 </h4> </p> <p class="modal-body"> <p> <table width="100%" border="0" class="userCon_2"> <tr> <th width="30%">名称:</th> <td width="70%"> <input type="text" name="Name" class="form-control" style="border-radius:3px; width:220px;" id="txtName" required="" aria-required="true"> </td> </tr> <tr> <th>动作类型:</th> <td> <select class="selectpicker show-tick" id="txtType" style="height: 30px; width: 220px;" name="Type"> <option value="view">view</option> <option value="click">click</option> </select> </td> </tr> <tr> <th>路径:</th> <td> <input type="text" name="Url" class="form-control" style="border-radius:3px; width:220px;" id="txtUrl" required="" aria-required="true" /> </td> </tr> <tr> <th>排序:</th> <td> <input type="text" name="Rank" class="form-control" style="border-radius:3px; width:220px;" id="txtRank" /> <input type="hidden" name="MainMenuGuid" value="" id="txtMainMenuGuid" /> </td> </tr> </table> </p> </p> <p class="modal-footer" style="border-top:none;"> <button type="button" class="btn btn-default" data-dismiss="modal" id="btnClose">关闭</button> <button type="submit" class="btn btn-primary" id="btnSave">保存</button> </p> </p><!-- /.modal-content --> </p><!-- /.modal --> </p>
La boîte modale a un attribut Vous pouvez éviter de cliquer sur le calque de masque pour provoquer la fermeture de la boîte modale. Il s'agit du data-backdrop="static" défini dans p. Cela peut empêcher la fermeture de la boîte modale en raison d'erreurs soudaines lors de la saisie du contenu dans la boîte modale.
Il existe également un autre attribut : data-keyboard="false". Il s’agit de rendre la touche de sortie ESC invalide. Il en va de même pour éviter une erreur de fonctionnement soudaine provoquant la fermeture de la boîte modale.
<p id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-newAdd" data-toggle="modal" data-target="#userModal"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn btn-newAdd"> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-newAdd"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </p>
L'attribut du bouton data-toggle=" modal" data-target="#userModal" consiste à ouvrir la boîte modale.
Pour plus de boîtes modales et de propriétés des boîtes modales dans bootstrap, veuillez faire attention au site Web PHP chinois pour les articles connexes !