Maison > interface Web > tutoriel HTML > le corps du texte

Boîtes modales et propriétés des boîtes modales dans bootstrap

高洛峰
Libérer: 2017-02-20 11:16:15
original
1707 Les gens l'ont consulté

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">
                        &times;                    </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>
Copier après la connexion

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>
Copier après la connexion

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 !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal