设为首页 加入收藏

TOP

前端通用框架可行性研究报告之弹窗(二)
2017-10-10 16:46:20 】 浏览:10586
Tags:前端 通用 框架 可行性 研究报告
hover
">box-shadow</button> </div> <div class="col-xs-6"><button class="btn btn-primary has-hover">无进入动画</button></div> <div class="col-xs-6"><button class="btn btn-warning has-hover">单个按钮</button></div> <div class="col-xs-6"> <button type="button" class="btn btn-info" id="btn-modal">bootstrap弹窗</button> </div> <div class="col-xs-6"> <button type="button" class="btn btn-info" >无标题</button> </div> </div> </div> <script type="text/html" id="modal-tpl"> <div id="dialogContent"> 这里是用户获取到的内容,获取的内容,可直接设置在这里,然后在页面显示 </div> </script> <script> var basepath = "../../";//定义当前目录的位置(如果全部在根目录的话,则不需要定义)</script> <!--1、首先加载sea.js 我们使用的是模块化来加载文件--> <script src="../../js/modules/sea.js"></script> <!--2、然后加载配置项--> <script src="../../config.js"></script> <!--3、最后使用seajs.use来加载当前需要加载的模块--> <script> seajs.use("../js/dialogs"); </script> </body> </html> 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) {
首页 上一页 1 2 3 下一页 尾页 2/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇CSS深入理解学习笔记之border 下一篇CSS深入理解学习笔记之border

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目