Introduction à l'utilisation des compétences pop-up box_javascript du modèle BootStrap

Avant, nous avons expliqué l'utilisation de l'onglet bootstrap. Aujourd'hui, nous allons découvrir l'utilisation de la fenêtre contextuelle du modèle dans bootstrap.

Effet :

Code :

<input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx"/>
<!-- Modal -->
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body"></div>
</div>

C’est très simple, c’est tout.

Remarque : l'attribut data-target pointe vers l'identifiant du modèle, alors cliquez sur le bouton et le modèle apparaîtra.

Bien sûr, vous pouvez également utiliser js pour le contrôler.

Le code suivant :

Afficher : $('#myModal').modal('show');

Masquer : $('#myModal').modal('hide');

Commutateur : $('#myModal').modal('toogle');

Événement : $('#myModal').on('hidden', function () {// faire quelque chose…});

Remarque : j'ai utilisé l'attribut href ici pour permettre au modèle d'accéder à une URL distante. Bien entendu, vous pouvez écrire le contenu que vous souhaitez directement dans le corps du modèle.

Regardez attentivement la structure div du modèle, et vous comprendrez que model-body représente le contenu et model-header représente l'en-tête. Si vous souhaitez ajouter deux boutons en bas, vous devez utiliser ce qui suit. code.

<div class="modal-footer">
<a href="#" class="btn">关闭</a>
<a href="#" class="btn btn-primary">保存</a>
</div>

Remarque : Si vous souhaitez définir la largeur du modèle, vous devez ajouter une mise en page. Placez simplement le modèle dans le bloc de code ci-dessous et définissez la largeur du modèle. style="width:500px". À propos, vous ne pouvez pas utiliser le style span et le mettre directement dans la classe. .

<div class="container"></div>

Ce qui précède est l'utilisation de la boîte contextuelle du modèle BootStrap introduite par l'éditeur. J'espère qu'elle sera utile à tout le monde !