View Code

上面代码，是用我的通用框架代码，大家如果用到弹窗，可直接引用dialog.js 、dialog.css、jquery.js和dialogtest.js即可

dialogtest.js代码如下

define(function (require) {
    require("bootstrap");//加载bootstrap
    require('dialog');//加载弹窗  
    require('dialogcss');//加载弹窗  
  
 
    var modal = new Modal({
        title: '测试案例',
        content: $('#modal-tpl').html(),
        width: "90%",
        onOk: function () {
            //操作
            alert("你点击了确定");
        },
        onModalShow: function () {
            //弹窗初始化操作
            
        }
    });
    $(".btn").each(function (index) {
        $(this).on("click", function () {
            if(index==0)
            {
                $('body').dailog({ type: 'defalut' });
            }else if(index==1)
            {
                $('body').dailog({ type: 'success' })
            }
            else if (index == 2) {
                $('body').dailog({ type: 'primary' })
            }
            else if (index == 3) {
                $('body').dailog({ type: 'danger' })
            }
            else if (index == 4) {
                $('body').dailog({ type: 'warning' })
            }
            else if (index ==5) {
               $('body').dailog({ type: 'success', maskBg: 'rgba(33,11,22,0.5)' })
            }
            else if (index ==6) {
                $('body').dailog({
                    type: 'danger', title: '我是自定义标题', 
                    discription: '这里是自定义的描述，可以写上你的描述或者他的描述，总之可以写很多文字，你自己看着办吧'
                }, function (ret) {
                    if (ret.index == 0)
                    {
                        alert("你点击了确定按钮");
                    } else
                    {
                        alert("你点击了取消操作");
                    }
                    console.log("信息为："+JSON.stringify(ret));
                })
            } else if (index ==7) {
                $('body').dailog({
                    type: 'danger', title: '错误提示',
                    discription: '这里是自定义的描述，可以写上你的描述或者他的描述，总之可以写很多文字，你自己看着办吧',
                    isInput: true
                }, function (ret) {
                    console.log(ret);
                    if (ret.index === 0)
                    {
                        alert('你点击的是第' + ret.index + '个按钮,状态:' + ret.input.status + ';输入的值为:' + ret.input.value)
                    };
                });
            } else if (index == 8) {
                $('body').dailog({ type: 'defalut', showBoxShadow: true })
            } else if (index ==9) {
                $('body').dailog({ type: 'success', showBoxShadow: true, maskBg: '#fff' })
            } else if (index == 10) {
                $('body').dailog({ type: 'primary', showBoxShadow: true, maskBg: '#ccc' })
            } else if (index == 11) {
                $('body').dailog({ type: 'primary', showBoxShadow: true, animateStyle: 'none' })
            } else if (index == 12) {
                $('body').dailog({
                    type: 'warning', showBoxShadow: true, animateStyle: 'none',
                    bottons: ['确定'], discription: '也许有点问题!'
                })
            }else if(index==13)
            {
                modal.open();
            } else if (index == 14) {
                $('body').dailog({ type: 'defalut',showBoxShadow: true, animateStyle: 'none',isnobutton:false,
                    bottons: ['关闭'], discription: '也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题!'
                });
            }
        })
    })

})

以上是“如何使用seajs库和Bootstrap框架搭建通用前端框架”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！