在bootstrap3.7的基础上自定义模态dialog小工具

た入场券 2022-06-09 12:11 74阅读 0赞

# 背景 #

今年带技术前端招的都是新人（公司决定），看在我让他们自学VUE和rout累成狗的份上我基本没让他们参与后台管理界面的搭建。但是后台界面又需要像toast,dialog这样的样式，以及vue分页这些小插件，于是便在加班加点的情况下自己基于jquery做了一些小工具，今天主要讲讲对话框，毕竟bootstrap的对话框大家用的还是很多的,写个方法而不需要官网上面那样写html的自定义大多都很繁杂，我也是在看了大量其他人自定义的方法后根据自己的简单需求写的通用的写出来。  
看效果图：这个是通过URL显示对话框内容  
![这里写图片描述][SouthEast]

# 默认对话框 #

[http://v3.bootcss.com/javascript/\#modals][http_v3.bootcss.com_javascript_modals]  
官方提供的模态对弹框

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
    
    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          ...
        </div>
      </div>
    </div>

要实现弹框都得自己在页面上写个框的模板，为何这些通用的模板不能封装起来，具体的内容什么的我们自己定义呢，因此我自己写就倒腾出来了，毕竟写JS交互的时候我只想使用个弹窗而已不想再在页面上加html了。  
代码如下

/*********** * jquery 扩展插件 * 依赖 jquery.js * 自定义bootstrap模态对话框工具 * @author zjcjava@163.com *warning fa-exclamation-triangle *sucess fa-check-circle *info fa-info-circle *erro fa-exclamation-circle * @param {Object} $ */
    (function ($) { 
        /*********** * 对话框 * jquery 扩展插件 * 依赖 jquery.js * 自定义bootstrap模态对话框工具 * @author zjcjava@163.com * @param 配置文件如下： * {title: '标题', content: '内容', url:'baidu.com', width: 600, onShow:function(){},//显示时回调方法 onClose:function(){},//关闭时回调方法 buttons: [ { html: '<button type="button" class="btn btn-sm btn-primary btn-ok">确定</button>', callback: function(){ //点击确定按钮的回调 console.log("确定"); } }]}//自定义按钮和点击事件 * */
        $["xmDialog"] = function(conf){ 
            if(!conf){
                conf={title:"竹子的标题",content:"hello,竹子"};
            }
            if(!conf.id){
                // 获取当前时间戳(以s为单位)
                var timestamp = Date.parse(new Date());
                conf.id="xm_id_"+timestamp;
            }
            if(!conf.title){
                conf.title="";
            }
            if(!conf.content){
                conf.content="";
            }
    
            if(conf.width&&conf.width>30){
                conf.width="style='width:"+conf.width+"px;'";
            }
            //显示事件
            if(conf.onShow&&typeof(conf.onShow)!= 'function'){
                //是函数
                throw "conf.onShow is not a function";
                return false;
            }
    
            //关闭事件
            if(conf.onClose&&typeof(conf.onClose)!= 'function'){
                //是函数
                throw "conf.onClose is not a function";
                return false;
            }
    
            //按钮
            var buttonHtml="<button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button>";
            if(conf.buttons instanceof Array){
                //是函数
                buttonHtml="";   
            }
    
            var dialogHtml="<div id='"+conf.id+"' class='modal fade' tabindex='-1' role='dialog' aria-labelledby='mySmallModalLabel' aria-hidden='true' > ";
            dialogHtml+="<div class='modal-dialog' "+conf.width+">";
            dialogHtml+="<div class='modal-content'>";
    
            dialogHtml+="<div class='modal-header'>";
            dialogHtml += "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>";
            dialogHtml += "<h4 class='modal-title' id='myModalLabel'>"+conf.title+"</h4>";
            dialogHtml += "</div>";
    
            dialogHtml += "<div class='modal-body'>";
            dialogHtml += conf.content;
            dialogHtml += "</div>";
    
            dialogHtml += "<div class='modal-footer'>";
            dialogHtml += buttonHtml;
            //dialogHtml += "<button type='button' class='btn btn-primary'>提交更改</button>";
            dialogHtml += "</div>";
    
            dialogHtml+="</div>";
            dialogHtml+="</div>";
            dialogHtml+="</div>";
    
            var dialogObj=$(dialogHtml);
    
            //添加URL内容
            if(conf.url){
                dialogObj.find(".modal-body").load(conf.url);
            }
            //添加button并绑定事件
            if(conf.buttons instanceof Array){
                //是函数
                for(var o in conf.buttons){  
                    var btObj=$(conf.buttons[o].html);
    
                    if(typeof(conf.buttons[o].callback)== 'function'){
                        btObj.on("click",function(){ 
                        　　　conf.buttons[o].callback();
                            $('#'+conf.id).modal('hide');
                        });
                    }
                    dialogObj.find(".modal-footer").append(btObj);
    
                }   
            }
    
    
            $("body").append(dialogObj);
            $('#'+conf.id).modal('show');
            $('#identifier').on('show.bs.modal', function () { 
                  // 执行一些动作...
                if(typeof(conf.onShow)== 'function'){
                    conf.onShow();
                }
            });
            $('#'+conf.id).on('hidden.bs.modal', function () { 
                  // 执行一些动作...
                $('#'+conf.id).remove();
                if(typeof(conf.onClose)== 'function'){
                    conf.onClose();
                }
    
            })
        };
    
    
    
    }( jQuery ));

直接调用就可以弹出默认的框框了；  
$.xmDialog()

<button type="button" onclick=" $.xmDialog();">对话框</button>
    
    //在js中直接调用,需要加入jquery和bootstarp的文件
    $.xmDialog()

![这里写图片描述][SouthEast 1]

# 实现自定义对话框和回调方法 #

自定义文本内容  
![这里写图片描述][SouthEast 2]

var conf={title: '竹子',
            url: 'http://localhost:8080/xm-web-sys/',
            onShow:function(){ },//显示时回调方法
            onClose:function(){ },//关闭时回调方法
            buttons: [
            {
            html: '<button type="button" class="btn btn-sm btn-primary btn-ok">确定</button>',
            callback: function(){ 
            //点击确定按钮的回调
                console.log("哈哈单身狗好啊");
            }}
            ]};

自定义URL的链接内容

![这里写图片描述][SouthEast 3]

[SouthEast]: /images/20220609/c4b9a674752949f599673216d66df7c2.png
[http_v3.bootcss.com_javascript_modals]: http://v3.bootcss.com/javascript/#modals
[SouthEast 1]: /images/20220609/ce9da4a910264776b380a91276750d16.png
[SouthEast 2]: /images/20220609/56042ad585684e7aacd6cbbbb158f3ef.png
[SouthEast 3]: /images/20220609/7f9e3a57e13d4c62b8f08c940ee11458.png