LoginSignup
3
4

More than 5 years have passed since last update.

Bootstrapのmodalを呼び出すjsライブラリ

Last updated at Posted at 2015-05-16

を作りました。正確に言えば以前に作ったものを思いつきでCoffeescriptに書き直したのでついでにgithubに公開してみました。
bootstrapのモーダルは見栄えも良くて各ブラウザでの確認ウインドウの差異を吸収するのに愛用するんですが、
素直にhtmlを書こうとするとdivが何重にもネストしたりして面倒なので。

BootstrapModal

https://github.com/fisherman08/BootstrapModal

  • モーダルのタイトル、本文を指定できます。本文はjQueryオブジェクトも受け取ります
  • 任意の数のボタンをそれぞれコールバック付きで作成できます。bootstrapのボタンのクラス(info,success,warning,danger)を指定できます。標準ではdefaultになります。
  • モーダルのロックなどのオプションもあります

使用方法:

.jsファイルを読み込むだけです

example.html
<script src="bs_modal.js"></script>

simple example :

window.alert()を置き換えるだけなら以下の1行でできます

example.js
   BootStrapModal.call({"title":"success", "body":"Data successfully updated"});

another example with full-options :

色々オプションをつけてボタンをたくさん載せると以下の感じになります。
各オプションの詳細はコメントを見てください。すいません。。。

example.js

   // "body" option can receive a String or a jQuery object
   var $p = $('<p/>').text('Are you sure to delete the data?');


   BootStrapModal.call(
        {
            "title"  : "delete the data", // the title put at the header(String)
            "body"   : $p, // the main message of the modal window(String or jQuery object)
            "fade"   : true, // if true, the modal window appears by fading(Boolean)
            "static" : true, // if true, the modal window WILL NOT BE DISAPPEARED when background is clicked or ESC is pressed.(Boolean)
            "id"     : "", //
            "actions" :[ // Array of objects to create buttons
                        {
                            "label": "Cancel",
                            "type": "default",
                            "class_str": "",
                            "close": true,
                            "callback": function(modal){
                                     // the function to be executed when the button is clicked
                                     // this function will receive the instance of modal class, which has "close()" method to close the modal.
                                     // when you set the "close:false", do not forget to call "modal.close()" at the last of the function
                            }
                        },
                        {
                            "label": "Delete",
                            "type": "danger",
                            "class_str": "",
                            "close": false,
                            "callback": function(modal){
                                    alert("delete!");
                                    modal.close();
                            }
                        }
                        ]
        }
    );

ただこれだけです。非常に簡単なライブラリですが、あると便利。
バグやツッコミどころはかなりあると思うので、もしお気付きの方がいらっしゃいましたらここかgithubでご指摘ください。。
もちろんpull-requestも大歓迎です。
https://github.com/fisherman08/BootstrapModal

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4