ブートストラップモーダルをオフにする方法-ブートストラップのチュートリアル-php.cn

ブートストラップモーダルをオフにする方法

藏色散人

リリース： 2023-02-10 14:23:34

オリジナル

9726 人が閲覧しました

ブートストラップモーダルを閉じる方法: 1. ブートストラッププラグインを接続します; 2. モーダルボックスイベントをボタンにバインドします; 3. "$('#myModal').modal('hide') を渡します; " モーダルボックスを手動で閉じるメソッド。

ブートストラップモーダルをオフにする方法

このチュートリアルの動作環境: Windows 7 システム、ブートラップバージョン 3.3.7、Dell G3 コンピューターこの方法は、すべてのブランドのコンピューターに適しています。

ブートストラップモーダルを手動で閉じる方法:

モーダルボックスの書き方について:

公式ドキュメントにモーダルありブートストラップボックスの書き込み。 bootstrapは本当に使いやすくて便利です！

私のコードは以下に貼り付けられています

まず、ブートストラッププラグインを接続し、HTML ページ上のこれら 2 つのパッケージを接続する必要があります

ブートストラップモーダルをオフにする方法

#次に、コード部分が続きます:

モーダルボックスイベントをボタンにバインドします

<button class="btn btn-primary btn-lg btn_add"   style="max-width:90%" data-toggle="modal" data-target="#myModal">
一个按钮
</button>

ログイン後にコピー

モーダルボックス:

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 300px;margin: 0 auto">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    <!-- 模态框（Modal）标题 -->         
                </h4>
            </div>
            <div class="modal-body"> 
                <!-- 在这里添加一些文本 自定义内容-->
                <form>
                 <!-- 在这里添加一些文本 自定义内容-->
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary btn_check">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

ログイン後にコピー

以上です。図に示すように、コード内の情報を削除し、いくつかのコメントを追加しました:

ブートストラップモーダルをオフにする方法