aralejs / overlay Goto Github PK

点击页面（不包括 trigger 和 element）隐藏很多地方用到，overlay 提供一个注册机制，子类要使用此功能直接注册即可。

注册时提供不用隐藏的 DOM，比如 trigger。

能动态改变内容吗 复用

可能导致报错，要再排查一下。

Overlay.allOverlays

Overlay.blurOverlays

我现在是每次弹出来后，要对弹框里面的元素加事件，弹框里面的内容是异步取过来的。有现有回调方法木

sea-modules/arale-overlay/1.2.0/dist/arale-overlay/1.2.0/overlay
目錄好像深了一點

new Overlay({
                template: "<div class='overlay'>目标元素1</div>",
                parentNode: '#' + $form.attr('id'),
                id: 'myoverlay',
                style: {
                    color: '#fff'
                },
                align: {
                    selfXY: ['-100%', 0],
                    baseElement: '#a',
                    baseXY: [0, 0]
                }
            })

運行時顯示以下錯誤

TypeError: Overlay is not a constructor
baseXY: [0, 0]

问题：
使用focus触发时，例如一个文本框，我想选中一段文字，鼠标一不小心就滑到了文本框的外边，这时并没有失焦，但tip却隐藏了，原来是触发了下面的事件

// 绑定 blur 隐藏事件
Overlay.blurOverlays = [];
$(document).on('click', function (e) {
hideBlurOverlays(e);
});

这里的click能否改为mousedown ？

当trigger设置为多个选择器时，只有第一个触发

$(this.get('trigger')).click(function() {
     that.show();
});

后续的选择器 that.show 也已调用，为什么不显示

RT，就像 templatable 与 widget 的关系，mask 和 overlay 没有非常紧密的联系，个人觉得2者放在一个模块组里感觉不是很合适。分开独立发展更适合。

@afc163 @popomore

形如selfXY: ['-100%', 0] selfXY:[0,0] selfXY:[0,1] 参数值的含义是什么？

RT

Overlay在监听window的resize事件的处理中判断如果窗口的宽高无变化就忽略，这个逻辑在特定需求下存在问题。比如：页面中某个组件的DOM元素宽高发生变化，需要Overlay的位置也跟着变化。如果组件都是独立的，唯一能触发Overlay变化的就只有手动抛出window的resize事件了，但因为窗口的宽高无变化，Overlay不会做任何处理。能否考虑追加一个自定义属性来让Overlay处理手动抛出的resize事件。

http://aralejs.org/overlay/examples/mask.html

建议这个demo里加一个select来看效果

debug发现是 https://github.com/aralejs/iframe-shim/blob/master/src/iframe-shim.js#L28

这里的 target.is(':hidden') 一直为true ，导致iframe不会被创建

@afc163 @popomore

请到 demo 页面自己重现。

监听窗口 resize 事件，延时 500ms 进行重新定位

mac系统，将overlay项目clone到本地后，spm install > spm doc
然后在 127.0.0.1:8000/examples/ 查看demo，会报错。
如图所示。 手动将需要的文件夹及文件复制到 _site下后就正常了。
请问下出现这个问题是我操作有误吗？谢谢

如果在使用 Overlay 及其子类时, 不对 width 和 height 定义, 就算原本有相关尺寸设置也会失效, 因为 Overlay 中没有进行判断, 默认值均是空串.

        width: '',
        height: '',

    _onRenderWidth: function(val) {
        this.element.css('width', val);
    },

    _onRenderHeight: function(val) {
        this.element.css('height', val);
    },

老版本中没有这个问题, 所以升级版本后某些组件出现问题, 求兼容.

https://github.com/aralejs/overlay/blob/master/src/overlay.js#L34

这里强行的设置了 absolute，导致原来在 css 上的 fixed 失效了！

建议设置 absolute 前做个保护性判断，如果已经设置了 position 属性就不去设置了

1. 如果要show一个和默认style不同的mask，代码如下：

   mask.set({ backgroundColor:'red', opacity:0.5 }).show();
   

   是否能合并起来，这样使用，更加直观

   mask.show({ backgroundColor:'red', opacity:0.5 });
   

2. 从设计上来说，mask是一个全局的单例，但是现在的代码，如果在某处修改过style之后，后面再show出来的mask的样式都会跟着改变，mask的show不是互相隔离的，而是互相影响的

代码已经Pull Requests，请 @popomore 同学指正

#3

需求： 在一个弹出层里有一个简易的表单，表单的某些操作会触发 xConfirm 。 2者都是 overlay且有mask 。 xConfirm 关闭之后 mask 也跟着关闭了， 导致原来的表单弹出层没有mask可用了。

只有一个mask实例，在这种需求场景下就不合理了。

在一个浮层对象的 after('hide', function() {}) 的回调中显示另一个浮层时，会显示不出来。目前必须用 setTimeout 来调用。这个要细细考虑一下。

重现 demo 后续加上。

如题,
看了眼实现是有问题.
点击iframe中的内容是不会触发document的click的,也就不会hide.
修改成真正意义上的失去焦点才能解决这个问题.
但是这样,移出窗口外它也是会触发的.