Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

を作りました。正確に言えば以前に作ったものを思いつきで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

welmo
介護福祉の課題をテクノロジーで解決するサービスの開発と、子どもの可能性を解放する障がい児支援施設を運営しています。
https://welmo.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした