web-dev-qa-db-ja.com

ブートストラップなしでモーダルを作成できますか？

モーダルの作成を任されましたが、このビルドではBootstrapライブラリを使用できないと言われました。Bootstrapクラス？もしそうなら、誰かが私にいくつかのドキュメントを案内してもらえますか？

これは私がこれまでに持っているものです：

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel"><i class="fa fa-envelope"></i> </h4>
            </div><!-- modal-header -->
            <div class="modal-body">
                <p>Select the options below to get the right coverage type for you.</p>
                <form class="form-inline" role="form">
                    <div>

                    </div>
                </form>
            </div><!-- modal-body -->
        </div><!-- modal-content -->
    </div><!-- modal-dialog -->
</div><!-- modal -->

私の次のステップはそこに入れることでした：

<div class="form-group"></div>

しかし、それはBootstrapクラスです、代替手段は何ですか？

twitter-bootstrapbootstrap-modal
4
Daniel

Bootstrapクラスなしでモーダルを構築することは可能ですか？

モーダル は、ユーザーが親コンテンツを操作できないようにするオーバーレイです。 Boostrap の所有権はありませんが、Bootstrap 非常に簡単に cssクラスを追加して実装できます。その下にBootstrapは JQuery を使用して、モーダルを含むほとんどの機能を実装します。

他のライブラリを使用して実装できます たとえばBulma 、jqueryを使用する別のフレームワークを使用して たとえばjqueryui 、モーダルを実装できる他のjavascriptライブラリを使用して、またはjavascriptを使用して、あるいはcssとhtmlのみを使用して実装することによって。

This は、javascriptとcssを使用してモーダルを作成する方法に関する簡単なチュートリアルです。

This は、javascriptを使用せず、html5とcssのみを使用してモーダルを作成する方法に関するチュートリアルです。

これらのチュートリアルは、コードをjqueryなどのサードパーティライブラリに依存させたくない場合に非常に役立ちます。

ブートストラップを使用したくない（または使用できない）が、jqueryを使用できる場合は、 this チュートリアルに従うことができます。

9
c-chavez

このJqueryプラグインがあります。見てください： https://jqueryui.com/dialog

1
Mateus Luiz