web-dev-qa-db-ja.com

* just * Bootstrap modalの使用

私はBootstrap=を使用しない別のサイトとModalを統合しています。bootstrapを使用すると、コンポーネントごとにJavascriptを分離できます。 CSSはどうですか？bootstrap.cssにリンクすると、サイト全体が変更されます。モーダルが機能するのに十分なCSSが必要です（CSSファイルを調べて、必要なものを推測しようとしましたが、機能しませんでした） ）。

csstwitter-bootstrapbootstrap-modal
51
mdundas

Bootstrap v3.2.5の時点で更新

V3.2.5の時点で@Gruberの確認に感謝します。

リンクはhereのままで、@ Fisuで言及されているようにセットアップをカスタマイズします。

ただし、前述のmodalだけでなく、4つのオプションを選択する必要があります。 [すべて切り替え]をクリックしてすべてをオフにしてから、これら4つのオプションを選択します。

  • Buttons under Common CSS
  • コンポーネントの下の_Close icon_
  • Component animations (for JS) under JavaScript components
  • JavaScriptコンポーネントの下のModals

これにより、必要なCSSがすべて提供されます。次はjQueryプラグインセクションです。ここでも、すべて切り替えを選択してすべてをオフにし、2つのプラグインを選択するだけです。

  • Modals under コンポーネントにリンク
  • Transitions under Magic（あらゆる種類のアニメーションに必要）

必要なのはjs（_bootstrap.min.js_）とcss（_bootstrap.css_のみです。これらは少し変更する必要があります。以下で説明します）。そのページの下部に移動し、コンパイルしてダウンロードを選択してパッケージを取得します。

最後に注意する点があります。 @Rrrrrrrrrkが述べたように、 "cssの先頭にまだ多くの正規化が追加されていることがわかりましたが、安全に削除できます（htmlからimgに、cssを.img応答以降に保持） 。 "これはまだ有効です。モーダルにいくつかのスタイルを強制するために、次のcssも追加しました。

_.modal { font-family:Arial,Helvetica,sans-serif!important}
.modal p {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important; color:#000 !important; font-size:14px;}
_

これにより、フォントが元のモーダルスタイリングと同様になり、ページスタイルが引き継がれないようになります（おそらく、もう少し調整する必要があります）。注意すべき最後の項目として、この時点で http://cssminifier.com/ を実行してcssを縮小できます。数KB節約します。

モーダルの実装：

私もこれを終了するかもしれません。 Cookieプラグインを使用しているのは、コードに設定されている14日間メッセージを非表示にするオプションをユーザーに提供するためです。必要なコードブロックは次のとおりです。

これは、ドキュメントの_<head>_に挿入する必要があります。おそらくcssのいずれかの後です。したがって、終了_</head>_タグが機能します。

_<!-- CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="modalsonly/css/bootstrap-3.2.0.min.css">

<!-- END CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->
_

これは、_<body>_内に配置する必要があります。これにより、モーダルが作成され、含まれているCSSによって非表示になります。

_<!-- HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <div class="modal fade " id="important-msg" tabindex="-1" role="dialog" aria-labelledby="important-msg-label" aria-hidden="true">
      <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="important-msg-label">Message Title!</h4>
          </div>
          <div class="modal-body">
            <p>Message text</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="dont-show-again">Don't Show Again</button>
          </div>
        </div>
      </div>
    </div>

<!-- END HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->
_

このコードは、終了_</body>_タグの直前に配置する必要があります。 jQuery、ブートストラップ、および必要なcookieプラグインをロードします。

_<!-- PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <!-- Latest jQuery (1.11.1) -->
    <script src="modalsonly/js/jquery-1.11.1.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="modalsonly/js/bootstrap-3.2.0.min.js"></script>    

    <!-- jQuery Cookie -->
    <script src="modalsonly/js/jquery.cookie-1.4.1.min.js"></script>

<!-- END PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->
_

最後に、上記のプラグインの後にこのスクリプトを追加します。これは私の状況に合わせて少しカスタマイズされています.Cookieが設定されていない場合にのみモーダルを起動し、モーダルの起動がCookieを作成してモーダルの起動を無効にする[再表示しない]をクリックする機能を作成した場合のみです。

_<script>
    //Start the DOM ready
    $( document ).ready(function() {


        //CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP

            //Check to see if the cookie exists for the Don't show again option
            if (!$.cookie('focusmsg')) {
                //Launch the modal when you first visit the site            
                $('#important-msg').modal('show');
            }

            //Don't show again mouse click
            $("#dont-show-again").click( function() {

                //Create a cookie that lasts 14 days
                $.cookie('focusmsg', '1', { expires: 14 });     
                $('#important-msg').modal('hide');      

            }); //end the click function for don't show again

        //END CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP


    }); //End the DOM ready
</script>
_

お役に立てれば！幸運を。

95
Tony M

ブートストラップカスタマイズセクション に移動し、コンポーネントセクションでモーダルオプションのみを選択します。ファイルをダウンロードし、bootstrap.cssファイルを開いて、コンテンツ全体を独自のCSSファイルにコピーします。

必要な特定のパーツを見つけようとすると、重要なものを見逃す可能性が高くなります。さらに、モーダルcss自体は大きすぎません。

Update：リンクは現在 here です。 cssの先頭にまだ多くの正規化が追加されていることがわかりましたが、安全に削除できます（htmlからimgに、cssを.imgレスポンシブ以降に保つ）。

14
Fisu

ここでは、bootstrap 3：

JSnippet DEMO and Source code

github Gistのソースコード

CSSを含めた後、JSは使用方法がまったく同じです。

<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes you made to document before closing?</p>
                <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
8
Shlomi Hassid