弹出框(artDialog7)

Q1:使用(记得下载artDialog7)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="js/artDialog7/css/dialog.css">
    </head>
    <style>
        #dislogs{
            display: none;
        }
    </style>
    <body>
        <input type="button" value="弹出" id="btnDialog"/>
        <fieldset id="dislogs">
            <legend>添加</legend>
            <p>
                <label for="cname">名称</label>
                <input type="text" id="cname" name="cname" placeholder="请输入名称"/>
            </p>
            <p>
                <label for="cspeed">速度</label>
                <input type="text" name="cspeed" id="cspeed" placeholder="请输入速度"/>
            </p>
            <p>
                <label for="cplate">车牌</label>
                <input type="text" id="cplate" name="cplate" placeholder="请输入车牌"/>
            </p>
            <p>
                <label>详细</label>
                <textarea cols="80" rows="10" id="details" style="width:600px;"></textarea>
            </p>
            <p>
                <input type="button" value="添加" id="btnadd"/>
                <input type="button" value="修改" id="btnupdate"/>
            </p>
        </fieldset>
        <script src="../js/jquery-1.11.3.js"></script>
        <script src="js/artDialog7/dist/dialog.js"></script>
        
        
        <script>
            //弹出框
            var dialogAgu;
            $("#btnDialog").click(function(){
                dialogAgu=dialog({
                    title:"添加用户",
                    modal:true,
                    backdropOpacity:0.2,
                    width:'700px',
                    height:'420px',
                    content:$("#dislogs"),
                    backdropBackground: 'blue',
                    ok: function() {
                        var that = this;
                        that.title('提交中..');//改变状态
                        var s=setInterval(function() {//设置等待时间
                          alert("dd"); 
                          clearInterval(s);//停止时间
                          dialogAgu.close();//关闭弹出框
                        }, 500);
                        return false;
                    },
                    cancel:function(){
                        dialogAgu.close();
                    },
                    okValue:'确定',
                    cancelValue:'取消'
                });
                dialogAgu.show()
            });
        </script>
    </body>
</html>

 

结果:

 

 

 

 

Q2:属性

// 对齐方式
    //align: 'bottom left',
    
    // 是否固定定位
    //fixed: false,
    
    // 对话框叠加高度值(重要：此值不能超过浏览器最大限制)
    //zIndex: 1024,

    // 设置遮罩背景颜色
    backdropBackground: '#000',

    // 设置遮罩透明度
    backdropOpacity: 0.7,

    // 消息内容
    content: '<span class="ui-dialog-loading">Loading..</span>',
    
    // 标题
    title: '',

    // 对话框状态栏区域 HTML 代码
    statusbar: '',
    
    // 自定义按钮
    button: null,
    
    // 确定按钮回调函数
    ok: null,
    
    // 取消按钮回调函数
    cancel: null,

    // 确定按钮文本
    okValue: 'ok',
    
    // 取消按钮文本
    cancelValue: 'cancel',

    cancelDisplay: true,
    
    // 内容宽度
    width: '',
    
    // 内容高度
    height: '',
    
    // 内容与边界填充距离
    padding: '',
    
    // 对话框自定义 className
    skin: '',

    // 是否支持快捷关闭（点击遮罩层自动关闭）
    quickClose: false,

    // css 文件路径，留空则不会使用 js 自动加载样式
    // 注意：css 只允许加载一个
    cssUri: '../css/ui-dialog.css',

 Q3:事件

/**
     * 显示对话框
     * @name artDialog.prototype.show
     * @param   {HTMLElement Object, Event Object}  指定位置（可选）
     */
    
    /**
     * 显示对话框（模态）
     * @name artDialog.prototype.showModal
     * @param   {HTMLElement Object, Event Object}  指定位置（可选）
     */

    /**
     * 关闭对话框
     * @name artDialog.prototype.close
     * @param   {String, Number}    返回值，可被 onclose 事件收取（可选）
     */

    /**
     * 销毁对话框
     * @name artDialog.prototype.remove
     */

    /**
     * 重置对话框位置
     * @name artDialog.prototype.reset
     */

    /**
     * 让对话框聚焦（同时置顶）
     * @name artDialog.prototype.focus
     */

    /**
     * 让对话框失焦（同时置顶）
     * @name artDialog.prototype.blur
     */

    /**
     * 添加事件
     * @param   {String}    事件类型
     * @param   {Function}  监听函数
     * @name artDialog.prototype.addEventListener
     */

    /**
     * 删除事件
     * @param   {String}    事件类型
     * @param   {Function}  监听函数
     * @name artDialog.prototype.removeEventListener
     */

    /**
     * 对话框显示事件，在 show()、showModal() 执行
     * @name artDialog.prototype.onshow
     * @event
     */

    /**
     * 关闭事件，在 close() 执行
     * @name artDialog.prototype.onclose
     * @event
     */

    /**
     * 销毁前事件，在 remove() 前执行
     * @name artDialog.prototype.onbeforeremove
     * @event
     */

    /**
     * 销毁事件，在 remove() 执行
     * @name artDialog.prototype.onremove
     * @event
     */

    /**
     * 重置事件，在 reset() 执行
     * @name artDialog.prototype.onreset
     * @event
     */

    /**
     * 焦点事件，在 foucs() 执行
     * @name artDialog.prototype.onfocus
     * @event
     */

    /**
     * 失焦事件，在 blur() 执行
     * @name artDialog.prototype.onblur
     * @event
     */

 

posted @ 2018-11-15 14:52  zywds  阅读(846)  评论(0)    收藏  举报