精华内容
下载资源
问答
  • 本篇文章介绍自己在项目中基于bootstrapmodal组件,自定义alert,confirm和modal对话框的经验,相对比较简单实用,希望能对你有所参考价值。 1. 实例展示 详细的代码可通过前面给出的下载链接下载源码去了解,...
  • 本文转载自:http://www.cnblogs.com/lyzg/p/5229217.html 作者:lyzg 转载请注明该声明。 由于浏览器提供的alert和confirm框体验...本篇文章介绍自己在项目中基于bootstrapmodal组件,自定义alert,confirm和m...
    本文转载自:
    http://www.cnblogs.com/lyzg/p/5229217.html  作者:lyzg 转载请注明该声明。
    

     

    由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件。本篇文章介绍自己在项目中基于bootstrap的modal组件,自定义alert,confirm和modal对话框的经验,相对比较简单实用,希望能对你有所参考价值。(代码下载

    1. 实例展示

    详细的代码可通过前面给出的下载链接下载源码去了解,代码量不大,这三个组件加起来只有200多行

    image

    如果你有javascript的组件开发经验,我这个层级的代码相信你一下子就能看明白。源码中我还给出了一个demo,这个demo模拟了一个比较贴近现实需求的一个场景:

    1)用户点击界面上的某个按钮,打开之前定义的一个modal框:

    image

    2)用户在打开的modal框内填写一些表单,点击确定的时候,会触发一些校验:

    没填email时:

    image

    填写了email之后:

    image

    这两个提示其实是为了演示Alert和Confirm的效果硬塞进去的,实际上可能没有这么别扭的功能。

    3)在提示Password为空的时候,细心的人会发现那个确定按钮处于一个禁用的状态,这个考虑是因为确定按钮最终要完成的是一些异步任务,在异步任务成功完成之前,我希望modal组件都不要关闭,并且能够控制已点击的按钮不能重复点击;

    4)我用setTimeout模拟了一个异步任务,这个异步任务在点击确定按钮之后,3s才会回调,并且:

    当email输入admin@admin 的时候,会给出提交成功的提示,确定之后就会关闭所有的弹框:

    image

    当email输入其它值得时候,会给出提交失败的提示,并且modal框会依然显示在那里:

    image

    image

    在组件定义里面,尤其是注册按钮这一块,我加了一些AOP编程的处理,同时利用了jquery的延迟对象,来实现我需要的异步编程,详情请阅读源码,有问题可以在评论区交流赐教。

    2. 组件需求

    有时候为了写一个好用的组件,只需要把它的大概原型和要对外部提供的接口确定下来,就已经完成这个组件编写最重要的工作了,虽然还没有开始编码。以本文要编写的这几个组件来说,我想要的这几个组件的原型和调用形式分别是这样的:

    1)自定义alert框

    原型是:

    image

    调用时最多需要两个参数,一个msg用来传递要显示的提示内容,一个onOk用来处理确定按钮点击时候的回调,调用形式有以下2种:

    //1
    Alert('您选择的订单状态不符合当前操作的条件,请刷新列表显示最新数据后再继续操作!');
    //2
    Alert({
        msg: '您选择的订单状态不符合当前操作的条件,请刷新列表显示最新数据后再继续操作!',
        onOk: function(){
        }
    });

    第一种是没有回调的情况,那么直接传递msg即可,第二种是有回调的情况,用options对象的方式来传递msg和onOks回调这两个参数。不管onOk回调有没有,点击按钮的时候都要关闭弹框。

    2)自定义confirm框

    这个框的原型跟alert框只差一个按钮:

    image

    调用形式只有一种:

    Confirm({
        msg: '您选择的订单状态不符合当前操作的条件,请确认是否要继续操作!',
        onOk: function(){
    
        },
        onCancel: function(){
            
        }
    });

    onCancel是在点击取消按钮时候的回调。不管onOk和onCancel回调有没有,点击按钮的时候都要关闭弹框。onCancel回调可以没有。

    3)自定义modal框

    原型:

    image

    调用形式:

    var modal = new Modal({
        title: '',
        content: '',
        width: 600,
        buttons: [
            {
                html: '<button type="button" class="btn btn-sm btn-primary btn-ok">确定</button>',
                selector: '.btn-ok',
                callback: function(){
                    //点击确定按钮的回调
                }
            },
            {
                html: '<button type="button" class="btn btn-sm btn-default btn-cancel">取消</button>',
                selector: '.btn-cancel',
                callback: function(){
                    //点击取消按钮的回调
                }
            }
        ],
        onContentReady: function(){
            //当modal添加到DOM并且初始化完毕时的事件回调,每个modal实例这个回调只会被触发一次
        },
        onContentChange: function(){
            //当调用modal.setContent类似的方法改变了modal内容时的事件回调
        },
        onModalShow: function(){
            //当调用modal.open类似方法显示modal时都会触发的事件回调
        },
        onModalHide: function(){
            //当调用modal.hide类似方法隐藏modal时都会触发的事件回调
        }
    });
    
    $('#btn-audit').click(function(){
        modal.open();
    });

    跟Alert和Confirm不同的是,一个页面里面只需要一个Alert和Confirm的实例,但是可能需要多个Modal的实例,所以每个Modal对象都需要单独new一下。由于每个Modal要完成的事情都不相同,所以:

    需要一个title参数来设置名称,表达这个Modal正在处理的事情;

    content参数表示Modal的html内容;

    width参数设置Modal的宽度,Modal的高度保持auto;

    buttons参数用来配置这个Modal上面的按钮,一般情况下Modal组件只需要两个按钮(确定和取消)就够了,但也有少数情况需要多个按钮,所以把按钮做成配置的方式相对灵活一点,每个按钮用三个参数来配置,html表示按钮的html结构,selector方便注册回调的时候通过事件委托的方式来处理,callback配置按钮点击时的回调;

    onContentReady这个事件回调,可以在Modal初始化完毕的时候,主动去初始化Modal内部html的一些组件;由于组件初始化一般只进行一次,所以放在这个回调里面最合适;

    onContentChange回调,在一个Modal需要被用作不同的场景,显示不同的HTML的内容时会派上用场,但是不是非常的好用,处理起来逻辑会稍微偏复杂,如果一个Modal实例只做一件事情的时候,onContentChange这个回调就用不到了;

    onModalShow这个回调在每次显示Modal的时候都会显示,使用的场景有很多,比如某个Modal用来填写一些表单内容,下次填写的时候需要reset一下表单才能给用户使用,这种处理在这个回调里面处理就比较合适;

    onModalHide这个回调有用,不过能够用到的场景不多,算是预留的一个接口。

    4)其它需求

    所有类型的弹框都做成虚拟模态的形式,显示框的同时加一个遮罩;

    所有框都不需要支持拖动和大小调整;

    alert和dialog框的标题,按钮数量、按钮位置、按钮文字都固定。

    实际上

    遮罩这个效果,bootstrap的modal组件本身就已经支持了;

    拖动和大小调整,这个功能属于锦上添花,但是对软件本身来说,并一定有多少额外的好处,所以我选择不做这种多余的处理;

    alert和dialog不需要做太过个性化,能够统一风格,改变浏览器原生的弹框体验即可。

    5)DEMO中调用实例

    接下来演示下我在完成这三个组件开发之后,实际使用过程中调用这些组件的方式:

    var modal = new Modal({
        title: '测试modal',
        content: $('#modal-tpl').html(),
        width: 500,
        onOk: function(){
            var $form = this.$modal.find('form');
            var data = $form.serializeArray();
            var postData = {};
            data.forEach(function(obj){
               postData[obj.name] = obj.value;
            });
    
            if(!postData.email) {
                Alert('请输入EMAIL!');
                return false;
            }
    
            var deferred = $.Deferred();
            if(!postData.password) {
                Confirm({
                    msg: 'Password为空,是否要继续?',
                    onOk: function(){
                        _post();
                    },
                    onCancel: function(){
                        deferred.reject();
                    }
                })
            } else {
                _post();
            }
    
            return $.when(deferred);
    
            function _post(){
                //模拟异步任务
                setTimeout(function(){
                    if(postData.email === 'admin@admin') {
                        Alert({
                            msg: '提交成功!',
                            onOk: function(){
                                deferred.resolve();
                            }
                        });
                    } else {
                        Alert({
                            msg: '提交失败!',
                            onOk: function(){
                                deferred.reject();
                            }
                        });
                    }
                },3000);
            }
        },
        onModalShow: function () {
            var $form = this.$modal.find('form');
            $form[0].reset();
        }
    });
    $('#btn-modal').click(function () {
        modal.open();
    });

    3. 实现要点

    1)最基础的一点,要对bootstrap的modal组件源码有所了解

    初始化方式:$modal.modal()

    打开:$modal.modal('show')

    关闭:$modal.modal(hide)

    事件:bootstrap大部分带过渡效果的组件的事件都是成对的,并且一个是现在时,一个是完成时,modal组件定义了2对:

    show.bs.modal和shown.bs.modal,hide.bs.modal和hidden.bs.modal。

    这两对事件分别在打开和关闭的过渡效果执行前后触发。从我要定义的组件需求来说,定义组件的时候需要show.bs.modal和hidden.bs.modal这两个事件,在侦听到bootstrap的modal组件派发这两个事件的时候,派发自己定义的组件的事件:modalShow和modalHide。

    选项:

    backdrop: 是否显示遮罩;

    keyboard: 是否支持键盘回调;

    show:是否在初始化完毕就立即显示。

    这三个选项默认都是true,但是在我定义组件的时候,我都配置成了false,键盘回调这种特性暂时不考虑,所以配置为true;当调用bootstrap的modal初始化的时候当然不能立即显示弹框,所以也不能配置为true;backdrop配置为false的原因在下一点介绍。

    2)遮罩处理

    如果启用bootstrap的遮罩,会发现在点击遮罩部分的时候,弹框就会自动关掉了,这不是我期望的虚拟模态效果,所以必须把backdrop配置为false。但是把这个选项配置为false之后,又会引发一个新问题,就是组件没有了遮罩效果,所以为了兼顾这两个问题,只能自己写一个简单的遮罩处理:

    var $body = $(document.body),
        BackDrop = (function () {
            var $backDrop,
                count = 0,
                create = function () {
                    $backDrop = $('<div class="modal-backdrop fade in"></div>').appendTo($body);
                };
    
            return {
                show: function () {
                    !$backDrop && create();
                    $backDrop[0].style.display = 'block';
                    count++;
                },
                hide: function () {
                    count--;
                    if (!count) {
                        $backDrop.remove();
                        $backDrop = undefined;
                    }
                }
            }
        })();

    这段代码中引入count变量的原因是因为BackDrop是一个全局的单例对象,当调用多个modal实例的open方法的时候,都会调用BackDrop的show方法,为了保证在调用BackDrop的hide方法时,能够确保在所有的modal实例都关闭之后再隐藏Backdrop,所以就加了一个count变量来记录BackDrop的show方法被调用了多少次,只有当count为0的时候,调用BackDrop的hide方法才会真正隐藏BackDrop。

    3)组件的选项的默认值定义

    ModalDialog.defaults = {
        title: '',
        content: '',
        width: 600,
        buttons: [
            {
                html: '<button type="button" class="btn btn-sm btn-primary btn-ok">确定</button>',
                selector: '.btn-ok',
                callback: getDefaultBtnCallbackProxy('onOk')
            },
            {
                html: '<button type="button" class="btn btn-sm btn-default btn-cancel">取消</button>',
                selector: '.btn-cancel',
                callback: getDefaultBtnCallbackProxy('onCancel')
            }
        ],
        onOk: $.noop,
        onCancel: $.noop,
        onContentReady: $.noop,
        onContentChange: $.noop,//content替换之后的回调
        onModalShow: $.noop,
        onModalHide: $.noop//modal关闭之后的回调
    };

    通过buttons配置两个默认的按钮,确定和取消,然后为了简化这两个默认按钮的回调配置,把这两个按钮的接口进一步扩展到了上一级别,onOk和onCancel分别会在点击确定和取消的时候被调用,这两个选项完全是函数回调,不像onContentReady这种属于事件回调。getDefaultBtnCallbackProxy用来辅助注册onOk和onCancel:

    var getDefaultBtnCallbackProxy = function (callbackName) {
        return function () {
            var opts = this.options,
                callback = opts[callbackName] && typeof opts[callbackName] === 'function' ? opts[callbackName] : '';
    
            return callback && callback.apply(this, arguments);
        }
    }

    里面的this会被绑定到modal实例上。

    4)构造函数:

    function ModalDialog(options) {
        this.options = this.getOptions(options);
        this.$modal = undefined;
        this.$modalTitle = undefined;
        this.$modalBody = undefined;
        this.$modalFooter = undefined;
        this.state = undefined;
    }

    这个主要是声明了用到的一些实例变量。

    5)关键的原型方法和函数

    open: function (state) {
        this.state = state;
        !this.$modal && initModal(this, this.options);
        BackDrop.show();
        this.$modal.modal('show');
    }

    这是个原型方法,组件的初始化也是在这个方法调用的时候执行的(延迟初始化)。

    initModal = function (that, opts) {
        var $modal = createModal(that);
        that.setTitle(opts.title);
        that.setContent(opts.content);
        that.addButtons(opts.buttons);
        that.setWidth(opts.width);
        bindHandler(that, opts);
        $modal.modal();//调用bootstrap的Modal组件
        $modal.trigger('contentReady');
    }

    这是个函数,用来初始化组件。其中:

    setTitle是个原型方法,用来设置modal的标题;

    setContent是个原型方法,用来设置modal的html内容;

    addButtons是个原型方法,用来注册按钮;

    setWidth是个原型方法,用来设置modal的宽度;

    bindHandler是个函数,用来注册modal的那些事件;

    倒数第二步调用$modal.modal()初始化bootstrap的modal组件;

    最后一步触发contentReady事件。

    bindHandler源码:

    bindHandler = function (that, opts) {
        var $modal = that.$modal;
        typeof opts.onContentChange === 'function' && $modal.on('contentChange', $.proxy(opts.onContentChange, that));
        typeof opts.onContentReady === 'function' && $modal.on('contentReady', $.proxy(opts.onContentReady, that));
        typeof opts.onModalShow === 'function' && $modal.on('modalShow', $.proxy(opts.onModalShow, that));
        typeof opts.onModalHide === 'function' && $modal.on('modalHide', $.proxy(opts.onModalHide, that));
        $modal.on('show.bs.modal', function () {
            $modal.trigger('modalShow');
        });
        $modal.on('hidden.bs.modal', function () {
            $modal.trigger('modalHide');
        });
    }

    为了方便使用,我把onContentChange这几个回调的上下文绑定到了当前的modal实例。最后两个事件侦听就是把bootstrap的事件封装成了我定义的modal事件。

    addButtons源码:

    addButtons: function (buttons) {
        var buttons = !$.isArray(buttons) ? [] : buttons,
            that = this,
            htmlS = [];
        buttons.forEach(function (btn) {
            htmlS.push(btn.html);
    
            btn.selector && that.$modal.on('click', btn.selector, $.proxy(function (e) {
    
                var self = this,
                    $btn = $(e.currentTarget);
    
                //先禁用按钮
                $btn[0].disabled = true;
    
                var callback = typeof btn.callback === 'function' ? btn.callback : '',
                    ret = callback && callback.apply(self, arguments);
    
                if (ret === false) {
                    $btn[0].disabled = false;
                    return;
                }
    
                if (typeof(ret) === 'object' && 'done' in ret && typeof ret['done'] === 'function') {
                    //异步任务只有在成功回调的时候关闭Modal
                    ret.done(function () {
                        that.hide();
                    }).always(function () {
                        $btn[0].disabled = false;
                    });
                } else {
                    $btn[0].disabled = false;
                    that.hide();
                }
    
            }, that));
        });
    
        this.$modalFooter.prepend($(htmlS.join('')));
    }

    从这个代码可以看出:

    当按钮点击之后,按钮就会被禁用;

    当按钮返回false的时候,按钮恢复,但是modal不会被关闭,说明当前的一些操作被代码给拦下来了;

    当按钮返回的是一个延迟对象的时候,会等到延迟对象完成的时候才会恢复按钮,并且只有在延迟对象resolve的时候才会关闭modal;

    否则就恢复按钮,并主动关闭modal。

    在这段代码里面考虑了:

    按钮的防重复点击,modal的自动关闭以及异步任务的处理。

    6)封装Alert和Confirm

    Alert和Confirm其实就是一个特殊的modal,另外这两个组件还可以共用一个modal,了解到这些基础之后,组件就可以这样定义:

    var Alert, Confirm;
    (function () {
        var modal,
            Proxy = function (isAlert) {
                return function () {
                    if (arguments.length != 1) return;
                    var msg = typeof arguments[0] === 'string' && arguments[0] || arguments[0].msg || '',
                        onOk = typeof arguments[0] === 'object' && typeof arguments[0].onOk === 'function' && arguments[0].onOk,
                        onCancel = typeof arguments[0] === 'object' && typeof arguments[0].onCancel === 'function' && arguments[0].onCancel,
                        width = typeof arguments[0] === 'object' && arguments[0].width || 400,
                        _onModalShow = function () {
                            this.setWidth(width);
                            this.setContent(msg);
                            this[(isAlert ? 'hide' : 'show') + 'Button']('.btn-cancel');
                        },
                        _onModalHide = function () {
                            this.setContent('');
                        };
    
                    //延迟初始化modal
                    if(!modal) {
                        modal = new Modal({
                            'title': '操作提示',
                            onModalShow: _onModalShow,
                            onModalHide: _onModalHide,
                            onContentReady: function(){
                                this.$modalBody.css({
                                    'padding-top': '30px',
                                    'padding-bottom': '30px'
                                })
                            }
                        });
                    } else {
                        //如果modal已经初始化则需要重新监听事件
                        var $modal = modal.$modal;
                        $modal.off('modalShow modalHide');
                        $modal.off('modalShow modalHide');
                        $modal.on('modalShow', $.proxy(_onModalShow, modal));
                        $modal.on('modalHide', $.proxy(_onModalHide, modal));
                    }
    
                    modal.setOptions({
                        onOk: onOk || $.noop,
                        onCancel: onCancel || $.noop
                    });
    
                    modal.open();
                }
            };
    
        Alert = Proxy(true);
        Confirm = Proxy();
    })();

    这段代码里:

    首先考虑到了延迟初始化这个全局的modal组件;

    由于onModalHide和onModalShow这两个回调属于事件回调,在初始化组件的时候通过options传进去的参数,不能通过修改options的方式来更改回调,只能通过重新注册的方式来处理;而onOk和onCancel属于函数回调,只要更改了options里面的引用,回调就能更改;

    考虑到Alert和Confirm内容的长短,新加了一个参数width,以便调节框的宽度。

    4. 小结

    本文介绍的是自己在定义js组件过程中的一些方法和实践,代码偏多,不容易引起人的阅读兴趣,但是文中介绍的方法比较简单,而且这三个组件我已经用到好几个项目里面,从目前来看,能够解决我所有需要的弹框需求,所以我把它推荐出来,希望能给有需要的人带来帮助。如果你对代码有兴趣,欢迎下载源码了解详细的实现,任何问题都可在评论里面与我交流。谢谢阅读:)

    代码下载

    展开全文
  • 基于BootStrap modal组件实现的一个类似window对象alert框、confirm框和prompt框,涉及函数定义字符串获取、立即调用函数表达式、正则表达式运用,modal组件框调用等知识点。

    浏览器window对象的alert, confirm和prompt方法分别可以实现信息提示框框、yes|no选择框和输入框。由于浏览器的差异性,同是prompt输入提示框,不同浏览器显示不尽相同,因此很多UI框架都有其自己的Dialog实现,用以模拟window对象的alert等提示框。本文基于BootStrap modal组件,模拟了window对象的alert等提示框。

    1、页面截图

    在这里插入图片描述
    alert框,对应按钮:alert()
    在这里插入图片描述
    info框,对应按钮:info()
    在这里插入图片描述
    warn框,对应按钮:warn()
    在这里插入图片描述
    error框,对应按钮:error()
    在这里插入图片描述
    confirm框,对应按钮:confirm()
    在这里插入图片描述
    prompt框 input输入框,对应按钮:prompt-input
    在这里插入图片描述
    prompt框 textarea输入框,对应按钮:prompt-textarea
    在这里插入图片描述

    2、页面HTML代码

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8" />
    	<title>LyDialog</title>
    	<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
    	<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    	<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    	<style>
    		.modal-header, .modal-footer{padding-top: 8px; padding-bottom: 8px}
    		.modal-title{font-size: 14px;}
    		.modal-header .close{font-size: 14px; margin-top: 0px; }
    		.msg {font-size: 14px; line-height: 18px;}
    		.msg .icon{vertical-align: top; font-size: 14px; line-height: 18px}
    		.msg-info .icon{color:#427fed;}
    		.msg-warn .icon{color:#f4b400;}
    		.msg-error .icon{color:#da411f;}
    	</style>
    </head>
    <body>
    <div class="page-content container">
    	<div class="page-head" style="padding: 15px 0"> <!-- page-head -->
    		<button type="button" class="btn btn-sm" onclick="alert()">alert()</button>
    		<button type="button" class="btn btn-sm" onclick="info()">info()</button>
    		<button type="button" class="btn btn-sm" onclick="warn()">warn()</button>
    		<button type="button" class="btn btn-sm" onclick="error()">error()</button>
    		<button type="button" class="btn btn-sm" onclick="confirm()">confirm()</button>
    		<button type="button" class="btn btn-sm" onclick="prompt1()">prompt-input</button>
    		<button type="button" class="btn btn-sm" onclick="prompt2()">prompt-textarea</button>
    	</div><!-- page-head -->
    </div>
    <script type="text/javascript">
    	function alert() { LyDialog.alert({msg: '这是个Alert框.'}); }
    	function info() { LyDialog.info({msg: '这是个Info框.'});}
    	function warn() { LyDialog.warn({msg: '这是个Warn框.'}); }
    	function error() { LyDialog.error({msg: '这是个Error框.'});}
    	function confirm() {
    		LyDialog.confirm({msg: "确实要退出系统吗?", onOk: function() {
    			console.log("confirm: onOk");
    		}, onCancel: function(){
    			console.log("confirm: onCancel");
    		}})
    	}
    	function prompt1() {
    		LyDialog.prompt({msg: "请输入sid:(多个sid用英文逗号分隔)", onOk: function(val) {
    			console.log("prompt: onOk, ", val);
    		}, onCancel: function(){
    			console.log("prompt: onCancel");
    		}})
    	}
    	function prompt2() {
    		LyDialog.prompt({msg: "请输入意见反馈:", rows:2, onOk: function(val) {
    			console.log("prompt: onOk, ", val);
    		}, onCancel: function(){
    			console.log("prompt: onCancel");
    		}})
    	}	
    	var LyDialog = (function($) {
    		var _html = function() {/*
    			<div id="ly-dialog" class="modal modal-primary ly-dialog" tabindex="-1">
    			<div class="modal-dialog" style="width:400px;">
    			<div class="modal-content">
    				<div class='modal-header'>
    					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></button>
    					<h4 class="modal-title font-14">{title}</h4>
    				</div>
    				<div class="modal-body">
    					{msg}
    				</div>
    				<div class="modal-footer">
    					<button id="lydialog-btncancel" type="button" class="btn btn-warning btn-xs" data-dismiss="modal">取消</button>
    					<button id="lydialog-btnok" type="button" class="btn btn-primary btn-xs">确定</button>
    				</div>
    			</div>
    			</div>
    			</div>
    		*/};
    		var _msgTypes = {
    				info:"glyphicon glyphicon-info-sign", 
    				warn:"glyphicon glyphicon-warning-sign",
    				error:"glyphicon glyphicon-remove-sign"};
    		var _format = function() {
    			if(arguments.length == 0) return null;
    			var str = arguments[0], a = arguments.length > 1 ? arguments[1] : null;
    			for(var i=1;i<arguments.length;i++) {
    				var re = new RegExp('\\{' + (i-1) + '\\}','gm');
    				str = str.replace(re, arguments[i]);
    			}
    			return str;
    		};		
    		var _show = function(o) {
    				var _opts = {type: 'alert', msg: '请设置内容!', icon: 'info', val: '', rows: 1};
    				o = $.extend({}, _opts, o);
    				_init(o);
    				var _title = o.title, _body = o.msg, _openarg = {backdrop: 'static'}, $lydialog = $("#ly-dialog");
    				switch(o.type) {
    				case 'alert':
    					if(_title === undefined) _title = '信息';
    					_body = _format("<div class='msg msg-{0} clearfix'><span class='icon {1} fl' style='font-size:18px; margin-right:6px'></span>{2}</div>", 
    							o.icon, _msgTypes[o.icon], o.msg);
    					$("#lydialog-btncancel").hide();
    					break;
    				case 'confirm':
    					if(_title === undefined) _title = '提示框';
    					$("#lydialog-btncancel").show();
    					break;
    				case 'prompt':
    					console.log("afdf")
    					if(_title === undefined) _title = '';
    					_body = _format("<label class='c-999'>{0}</label>", o.msg);
    					if(o.rows > 1) {
    						_body += _format("<textarea id='lydialog-input' class='form-control input-sm' value='{0}' onfocus='this.select();' rows={1} style='resize:none;'></textarea>", o.val, o.rows);
    					} else {
    						_body += _format("<input id='lydialog-input' class='form-control input-sm' value='{0}' onfocus='this.select();'>", o.val);
    					}
    					$("#lydialog-btncancel").show();
    					break;	
    				}
    				_title = _title || '';
    				if(_title == '') {
    					$lydialog.find(".modal-header").hide();
    				}else{
    					$lydialog.find(".modal-header").show(); $lydialog.find(".modal-title").html(_title);
    				}
    				$lydialog.find(".modal-body").html(_body);
    				$lydialog.modal(_openarg);
    			},
    			_confirm = function(o) { _show($.extend(_types.confirm, o));},
    			_prompt = function(o) {_show($.extend(_types.prompt, o));},
    			_init = function(o) {
    				if($("#ly-dialog").length == 0) {
    					var _strhtml = _html.toString(), _reg = /\/\*([\s\S]*)\*\//gm, _rst = _reg.exec(_strhtml);
    					$(document.body).append(_rst[1]);
    				}
    				$("#lydialog-btnok").off("click").on("click", function(e){
    					$("#ly-dialog").modal('hide');
    					if(o.onOk) o.onOk($("#lydialog-input").val());
    				});
    				$("#lydialog-btncancel").off("click").on("click", function(e){
    					$("#ly-dialog").modal('hide');
    					if(o.onCancel) o.onCancel();
    				});
    			};
    			//
    		return {
    			alert: _show,
    			info: _show,
    			warn: function(o) {o = o || {}, o.title = '警告', o.icon = 'warn', _show(o);},
    			error: function(o) {o = o || {}, o.title = '错误', o.icon = 'error', _show(o);},
    			confirm: function(o) {o = o || {}, o.type = 'confirm', _show(o);},
    			prompt: function(o) {o = o || {}, o.type = 'prompt', _show(o);},
    		};
    	})(jQuery);
    </script>
    </body>
    </html>
    

    3、代码说明

    1)函数名.toString()获取函数定义

    var _strhtml = _html.toString(); // function(){ /*...*/ }
    

    2)正则表达式运用,获取函数注释 斜杠星号 之间的字符串

    var _strhtml = _html.toString(), _reg = /\/\*([\s\S]*)\*\//gm, _rst = _reg.exec(_strhtml);
    $(document.body).append(_rst[1]);
    

    3)bootstrap modal组件使用

    $lydialog.modal({backdrop: 'static'});
    $("#ly-dialog").modal('hide');
    

    4)立即调用的函数表达式

    var LyDialog = (function($) { ... })(jQuery);
    
    展开全文
  • 问题:弹出输入框之无法输内容 如题,当判断没有cookie之后弹出输入手机号码,然后屏幕变黑,输入框里输入不了手机号,...引入的bootstrap的css版本不对 错误的: 正确的: 方法二:你的div上有tabindex属性,去掉即可 ...

    问题:弹出输入框之无法输内容
    如题,当判断没有cookie之后弹出输入手机号码,然后屏幕变黑,输入框里输入不了手机号,submit也无法提交,这是怎么回事?
    方法:1.引入的bootstrap的css版本不对:

     错误的:<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     正确的:<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    

    方法二:你的div上有tabindex属性,去掉即可:

             <div class="modal fade" id="template-modal" tabindex="-1" role="dialog" aria-hidden="true">
    
    展开全文
  • 在这里将以最简洁的方式介绍Bootstrap框架的各个组件的实践示例。 Bootstrap组件Bootstrap Modal-Bootstrap模态框 Bootstrap tooltip-Bootstrap弹出框 一、Bootstrap Modal实践: 文档:Bootstr
    介:Bootstrap框架简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单。在这里将以最简洁的方式介绍Bootstrap框架的各个组件的实践示例。 
    

    Bootstrap组件:

    1. Bootstrap Modal-Bootstrap模态框
    2. Bootstrap tooltip-Bootstrap弹出框
    一、Bootstrap Modal实践:
    文档:Bootstrap Modal.htm
    1. <!DOCTYPE html>  
    2. <html lang="zh-CN">  
    3. <head>  
    4.     <!-- Meta, title, CSS, favicons, etc. -->  
    5. <meta charset="utf-8">  
    6. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    7. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    8. <meta name="description" content="">  
    9. <meta name="author" content="">  
    10.   
    11. <title>Bootstrap Modal</title>  
    12.   
    13. <!-- Bootstrap core CSS -->  
    14. <link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">  
    15.   
    16.   
    17.   </head>  
    18.   <body>  
    19.   
    20.     <!-- sample modal content -->  
    21.     <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
    22.       <div class="modal-dialog">  
    23.         <div class="modal-content">  
    24.   
    25.           <div class="modal-header">  
    26.             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
    27.             <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>  
    28.           </div>  
    29.           <div class="modal-body">  
    30.             <h4>Text in a modal</h4>  
    31.     
    32.           </div>  
    33.           <div class="modal-footer">  
    34.             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
    35.             <button type="button" class="btn btn-primary">Save changes</button>  
    36.           </div>  
    37.   
    38.         </div><!-- /.modal-content -->  
    39.       </div><!-- /.modal-dialog -->  
    40.     </div><!-- /.modal -->  
    41.   
    42.     <div class="bs-example" style="padding-bottom: 24px;">  
    43.       <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>  
    44.     </div><!-- /example -->  
    45.   
    46. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>  
    47. <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>  
    48.   </body>  
    49. </html>  
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <title>Bootstrap Modal</title>
    
    <!-- Bootstrap core CSS -->
    <link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
    
    
      </head>
      <body>
    
        <!-- sample modal content -->
        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
    
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
              </div>
              <div class="modal-body">
                <h4>Text in a modal</h4>
      
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
    
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    
        <div class="bs-example" style="padding-bottom: 24px;">
          <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
        </div><!-- /example -->
    
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
      </body>
    </html>
    
    自定义BOOTSTRAP框架Modal的宽高和显示位置,请访问:http://qoophp.com/archives/187
    源码下载: http://download.csdn.net/detail/rowisdom/6624741
    展开全文
  • Vue Bootstrap Modal是一个可重用的组件,您可以在需要显示简单的模式弹出窗口时在整个项目中使用。 因此,您不必每次都想使用引导程序模式时重复相同的html代码。 目录 开始吧 安装 npm install --save @...
  • bootstrap modal 垂直居中

    千次阅读 2016-09-04 18:41:28
    bootstrapmodal组件默认距顶部30px,不能垂直居中,通过修改bootstrap源码可修改这个问题:
  • Bootstrap modal

    千次阅读 2013-10-23 11:27:34
    modalBootstrap提供的一个“窗口组件”,可以配合js实现弹出窗口的效果。 modal的class是“modal”,其中必须包含三个div部分,属性分别问modal-header,modal-body,modal-footer. 同时modal可以用来放置注册表单...
  • ui.bootstrapmodal组件可以很方便地实现页面controller与模态框controller之间通信,特别是弹出的模态框中有比较复杂的表格信息需要用户填写,下面切入主题: 注册全局模态框实例的controller angular.module('...
  • bootstrap modal垂直居中

    2017-06-01 10:24:10
    使用过bootstrap modal(模态框)组件的人都有一种困惑, 好好的一个弹出框怎么就无法垂直居中了呢? 当然网上一些前辈也给出了不少答案, 感觉不太全而且针对的都是各自的项目难以给我等小白太直观的理解。因而手痒...
  • 网上有许多给Bootstrap Modal添加拖拽实现,但是许多代码看起来都比较复杂感觉封装性可能也不太好,有的甚至使用了jquery ui的拖拽功能,这些都不是我想要的,其实我在给Bootstrap Modal添加拖拽功能的事情已经是...
  • 1、带默认选项的模态 modal-basic.html <ng-template #content let-modal> <div class="modal-header">...h4 class="modal-title" id="modal-basic-title">Profile update</h4> <butt...
  • input id=btntext type=button value=添加文本组件 data-toggle=modal data-target=#myModal href=../SysManage/ZuJianManage.aspx/> <!-- Modal --> <div class=modal id=myModal tabindex=-1 role=dialog...
  • Bootstrap简单认识之Modal组件

    千次阅读 2017-03-02 20:05:22
    Modal(模态框)组件一、简介 不支持多个模态框同时存在 一般作为文档body元素的直接子元素存在(不要受到其他元素的影响,假如把模态框元素放在一个具有 transform 属性的父元素里,模态框的 position:fixed 属性就...
  • Bootstrap Modal多个弹出层顺序与div的顺序关联。后来者居上:即div靠后的modal层弹出的时候会在上层。 比如上图所示,模态框2弹出的时候会在模态框1上面。 ...
  • Bootstrap modal 多弹窗之叠加实现ESC快捷键关闭窗口
  • 当然还是官方提出的‘最好不要多个modal叠加很容易出现很难解决的前端组件问题’ 示例代码: <div class='bs-example-modal-lg fade modal' data='0' id='feature-mapping-dialog-form' xss=removed> <div class='...
  • 最近一直在使用Bootstrap,遇到了很多问题,通过google也...当然还是官方提出的‘最好不要多个modal叠加很容易出现很难解决的前端组件问题’示例代码:<div class='bs-example-modal-lg fade modal' data='0' id='featur
  • <p>I face an issue with bootstrap modal, what I'm trying to do is to insert HTML contents inside bootstrap modal using AJAX but when I load the modal nothing is displayed and when I inspect the modal ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,935
精华内容 1,574
关键字:

bootstrapmodal组件