打开新页面

三种方式

  • data-modal 常用于简单页面弹窗显示
  • data-open 常用于复杂页面新窗口打开
  • data-iframe 常用于引入独立页面

常用参数说明

  • 设置位置 data-offset = "r"
  • 设置宽高 data-area = "['300px','400px']" # 建议使用下面两个参数
  • 设置宽度 data-width="300px"
  • 设置高度 data-height="400px"
  • 关闭 data-modal 自动重载数据 data-close-refresh="ID"

js 改动

/*! 注册 data-modal 事件行为 */
onEvent('click', '[data-modal]', function () {
    var un = undefined, emap = this.dataset, data = {open_type: 'modal'};
    return applyRuleValue(this, data, function () {
        // old return $.form.modal(emap.modal, data, emap.title || this.innerText || '编辑', un, un, un, emap.area || emap.width || '800px', emap.offset || 'auto', emap.full !== un);
        // new : 处理area类型 string 转 object
        return $.form.modal(emap.modal, data, emap.title || this.innerText || '编辑', un, un, un, (typeof emap.area === 'string' ? eval("(" + emap.area + ")") : undefined) || emap.width || '800px', emap.offset || 'auto', emap.full !== un);
    })
});

详情可参照layui官方参数说明

  • offset: 'auto' 默认坐标,即垂直水平居中
  • offset: '100px' 只定义top坐标,水平保持居中
  • offset: 't' 快捷设置顶部坐标
  • offset: ['100px', '50px'] 同时定义top、left坐标
  • offset: 'r' 快捷设置右边缘坐标
  • offset: 'b' 快捷设置底部坐标
  • offset: 'l' 快捷设置左边缘坐标
  • offset: 'lt' 快捷设置左上角
  • offset: 'rt' 快捷设置右上角
  • offset: 'lb' 快捷设置左下角 #offset: 'rb' 快捷设置右下角

如有更可行的方式,可随时联系 L ,如有不严谨或者不规范的地方欢迎指正。

Last Updated:
Contributors: 邹景立