alertはコールバック関数をサポートし、confirm/prompなどのモードボックスを実現する【jQuery.bootboxに基づく】


/***********************
 **             bootbox                    
 *       bootstrap
 DEMO

 //html
 $M_.dialog.html("html   ","<small>      </small>");

 //ajaxHtml               html
 $M_.dialog.ajaxHtml("       ",dataurl);

 //iframe
 $M_.dialog.iframe("       ",dataUrl);

 //confirm         
$M_.dialog.confirm(function(){
    $M_.dialog.alert("     ");
},"       ?","     ");

//alert    
$M_.dialog.alert("     "); 
// 
alert("     "); 
alert("     ","title","buttonName",function(){
//callback
}); 

//                     ,                
$M_.dialog.prompt(function(data){
   console.log(data);
},"     ?","       ");

 *************************/

window.$M_= {};
$M_.PAGE_TIME=new Date().getTime();
(function(window){
    $M_.REG={//       
      "phone":/^1\d{10}$/,
      "tel": /^0\d{2,3}-?\d{7,8}$/,
      "email":/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
      "password":/^[\w]{6,12}$/
    };
    //         
    $M_.scrollY = function(elem){
      $(window).scrollTop(elem.offset().top-elem.parents(".form-group").height()-50);
      elem[0].focus();
    }
    /*    begin*/
    $M_.Dialog_=function(){}
    $M_.Dialog_.prototype={
        //ajax load
        ajaxHtml:function(title, dataurl){
            this.buildJplaneBoxHtml(title,"");
            this.initPlane();
            $("#J-plane-box"+$M_.PAGE_TIME).modal();
            this.planeAutosize();
            $("#J-plane-box"+$M_.PAGE_TIME+" .html-content").load(dataurl,{},function(){
                $("#J-plane-box"+$M_.PAGE_TIME+"-loading").hide();
            });
        },
        //inner Html
        html:function(title,innerHtml){
            this.buildJplaneBoxHtml(title,innerHtml);
            this.initPlane();
            this.planeAutosize();
            $("#J-plane-box"+$M_.PAGE_TIME).modal();
        },
        //include url page
        iframe:function(title,includeUrl){

            this.html(title,this.iframeboxhtml(includeUrl));
            $(".modal .modal-content .modal-header .close").off("click").on(function(){
                $("#J-plane-box"+$M_.PAGE_TIME).remove();
            });
            setTimeout(function(){
                $("#J-plane-box"+$M_.PAGE_TIME+"-loading").hide();
            },300);

        },
        buildJplaneBoxHtml:function(title,innerHtml){
            $("#J-plane-box"+$M_.PAGE_TIME).remove();
            var Jplaneboxhtml = "";
            Jplaneboxhtml += "<div class=\"modal fade\" id=\"J-plane-box"+$M_.PAGE_TIME+"\"  tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">";
            Jplaneboxhtml += " <div class=\"modal-dialog\">";
            Jplaneboxhtml += "    <div class=\"modal-content\">";
            Jplaneboxhtml += "       <div class=\"modal-header\">";
            Jplaneboxhtml += "          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;<\/button>";
            Jplaneboxhtml += "          <h4 class=\"modal-title\" id=\"myModal3Label\">"+title+"<\/h4>";
            Jplaneboxhtml += "       <\/div>";
            Jplaneboxhtml += "       <div class=\"modal-body\">";
            Jplaneboxhtml += "           "+innerHtml;
            Jplaneboxhtml += "       <\/div>";
            Jplaneboxhtml += "                                    <div class=\"modal-dialog\" id=\"J-plane-box"+$M_.PAGE_TIME+"-loading\">";
            Jplaneboxhtml += "                                        <div class=\"modal-hd html-content\">    ...<\/div>";
            Jplaneboxhtml += "                                        <div class=\"modal-bd\">";
            Jplaneboxhtml += "                                            <span class=\"icon-spinner icon-spin\"><\/span>";
            Jplaneboxhtml += "                                        <\/div>";
            Jplaneboxhtml += "                                    <\/div>";
            Jplaneboxhtml += "    <\/div>";
            Jplaneboxhtml += " <\/div>";
            Jplaneboxhtml += "<\/div>";
            $("body").append(Jplaneboxhtml);
        },/*   */
        iframeboxhtml:function(url){

            setTimeout(function(){
                var d_width = $(window).width()-50;
                $(".modal-dialog").css({
                    "width": d_width+"px",
                    "margin-left": (-d_width/2)+"px",
                    "left": "50%"
                });

            },200);


            return "<iframe src=\""+url+"\" frameborder=\"0\" width=\"100%\" height=\""+($(window).height()-130)+"\"><\/iframe>";
        },
        planeAutosize:function(){
            $("#J-plane-box"+$M_.PAGE_TIME+"-loading").show();
            //            $("#J-plane-box"+$M_.PAGE_TIME).width($(window).width()-200);
            //            $("#J-plane-box"+$M_.PAGE_TIME+" .html-content").css({
            //                "max-height":$(window).height()-100+"px",
            //                "overflow-y":"auto",
            //
            //            });
            //            setTimeout(function(){
            //                $("#J-plane-box"+$M_.PAGE_TIME).css({
            //                    "margin-top":-$("#J-plane-box"+$M_.PAGE_TIME).height()/2+"px",
            //                    "margin-left":-$("#J-plane-box"+$M_.PAGE_TIME).width()/2+"px",
            //                });
            //            },100);
        },
        initPlane: function(){
            //          
            $("#J-plane-box"+$M_.PAGE_TIME).off("closed.modal.amui").on("closed.modal.amui",function(){
                $("#J-plane-box"+$M_.PAGE_TIME+" .html-content").html("");
                $("#J-plane-box"+$M_.PAGE_TIME+"-loading").hide();
                $("#J-plane-box"+$M_.PAGE_TIME+" .html-title").html("...");
            });
        },alert:function(innerHtml,title,buttonName,callfunc){
            //$M_.dialog.alert("     !","    ");
            bootbox.dialog({
                message: innerHtml,
                title: title==null?"    ":title,
                buttons: {
                    success: {
                        label: buttonName==null?"   !":buttonName,
                        className: "btn-primary btn-alt",
                        callback: function() {

                            //callback result
                            typeof callfunc == "function" ? callfunc.call(this) :"";
                        }
                    }
                }
            });
        },confirm:function(callfunc,innerHtml,title,cancelfunc){
            //            DEMO
            //            $M_.dialog.confirm(function(){
            //                $M_.dialog.alert("     ");
            //            },"       ?","    ");
            bootbox.confirm({
                message: innerHtml==null?"       ?":innerHtml,
                title: title==null?"    ":title,
                buttons: {
                    cancel:{
                        label:"  ",
                        className: "btn-primary btn-alt"
                    },
                    confirm:{
                        label:"  ",
                        className: "btn-primary btn-alt"
                    }
                },
                callback: function(result) {
                    //callback result
                    if(result){
                        typeof callfunc == "function" ? callfunc.call(this):"";
                    }else{
                        typeof cancelfunc == "function" ? cancelfunc.call(this):"";
                    }
                }

            });




        },prompt:function(callfunc,title){
            //            DEMO
            //            $M_.dialog.prompt(function(data){
            //                console.log(data);
            //            },"       ");
            bootbox.prompt({
                title: title==null?"   ":title,
                buttons: {
                    cancel:{
                        label:"  ",
                        className: "btn-primary btn-alt"
                    },
                    confirm:{
                        label:"  ",
                        className: "btn-primary btn-alt"
                    }
                },
                callback: function(result) {
                    //callback result
                    typeof callfunc == "function" ? callfunc.call(this,result):"";
                }
            });

        }

    }

    $M_.dialog = new $M_.Dialog_();
    /*     end */
      window.alert=$M_.dialog.alert;
})(window);
  bootstrap.css,jquery-2.1.1.min.js,bootstrap.min.js,bootbox.js