jQueryUI dialogを利用してalert関数を作成

alertするパターン毎にdivタグをHTMLにべた書きは面倒。

Dialog | jQuery UIを見てみると、

divタグをHTMLに記述してそれをalertで利用するような使い方で書いてある。

alertの種類分作ってられないので関数の中でdivを作ってから

ダイアログ表示後に後片付けするような関数を作ってみる。

毎度毎度dom生成するから重い?

定義:alertDialog関数

引き数オブジェクト

キー 内容
title ダイアログのタイトル
body ダイアログの本文
close ダイアログを閉じたときに実行する関数

使い方

$(function() {

  $("#btnAlert").on("click", function(){
    alertDialog({title:"title",body:"body", close: function(){ console.log("ダイアログを閉じました。") }});
  });

});

デモ

アラートを終了したら再度アラートをしてみる。

alertDialog({title:"title",body:"body", close:function(){
  alertDialog({title:"title2回目",body:"body2回目", close:function(){} });
}});

ソース

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script type="text/javascript">
    function alertDialog(_options){
        var default_option = {
          title:"",
          body:"",
          close:function(){ return true; }
        }
        var options = $.extend(default_option , _options, {});
        var dom = $("<div />", { title: options.title, html: options.body });
        dom.dialog({
          modal: true,
          close: function(){
            var dom = $(this);
            dom.dialog("destroy");
            dom.remove();
            options.close();
          },
          buttons: [
            {
              text: "Ok",
              click: function() {
                $(this).dialog("close");
              }
            }
          ]
        });
    };
</script>


<script type="text/javascript">
  $(function() {
    $("#btnAlert").on("click", function(){
      alertDialog({title:"title",body:"body"});
    });
  });
</script>

<button id="btnAlert">デモ</button>