关于layer弹窗

layer弹窗分为:PC和WAP,引入的方式也很简单,只是数不熟练的问题,直接看官网的教程即可。layer.layui.com

PC端的功能很强大,而相比于手机端,功能弱了不少,可能都需要自己来定制吧,比较麻烦。而且感觉效果也没PC端直接。

项目里的手机端,使用了layer-mobile,但是感觉样式还不如pc好看,更能也少。而PC的layer,在手机端,展示貌似也没问题,所以,打算wap端全部使用pc的layer来替换掉。

之前总结了下wap端的文档,代码里打算删除,这里笔记一下:

            layer-mobile参数对象:
                type - 类型。0-信息框|1-页面层|2-加载层
                content - 内容
                title - 标题(空-不展示|string-标题内容|array-标题&样式(['我是标题', 'background-color: #eee;']))
                time - 自动关闭秒数。默认不开启
                style - 自定义层的样式
                    style: 'border:none; background-color:#78BA32; color:#fff;'
                skin - 弹层显示风格(footer-底部对话框|msg-普通提示)
                className - 自定义一个css类。这样,可以在css中控制 '弹层的样式'(和style功能相似,不用写在html文件内了,统一抽离到css中)
                btn - 按钮(空-无按钮|string-1个按钮|array-2个按钮(btn:['取消', '确定']))
                anim - 动画(scale-默认|up-从下往上弹出|false-不启用动画)
                shadow - 遮罩(true-显示遮罩(默认)|false-不显示遮罩|string-遮罩风格(background-color:#ccc;))
                shadeClose - 是否点击遮罩时,关闭层(true-默认|false)
                fixed - 是否固定层(true-默认|false)
                top - 控制层的纵坐标
                success - 成功弹出层,回调函数 function(elem){}   // elem - 当前层元素对象
                yes - 确定按钮触发的回调函数 function(index){}   // index - 当前层索引
                no - 取消按钮触发的回调函数 function(index){}   // index - 当前层索引
                end - 层彻底销毁的回调函数 function(index){}   // index - 当前层索引
            内置方法/属性
                layer.v - layer-mobile 版本号
                layer.close(index) - 关闭特定层
                layer.closeAll() - 关闭所有层


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OpenLayers是一个用于创建交互式地图的JavaScript库。您提到的"openlayer弹窗"可能是指在OpenLayers地图中创建弹窗窗口的功能。 首先,为了创建OpenLayers弹窗,您需要一个DOM对象来承载弹窗内容。这可以通过在HTML页面中添加一个具有唯一ID的div元素来实现。该div元素将用作OpenLayers弹窗的容器。您可以在该div元素中添加其他元素,以定义弹窗的样式和内容。 为了定义弹窗的样式,您可以使用CSS来设置div元素的样式属性。您可以为弹窗容器div添加类名或直接为其设置样式属性。通过设置宽度、高度、背景颜色、边框样式等属性,您可以自定义弹窗的外观。 一旦您创建了弹窗容器和定义了其样式,您可以使用OpenLayers中的功能来处理弹窗的显示和关闭事件。通过监听地图上的特定事件,例如单击地图上的某个要素或位置,您可以触发弹窗的显示。在弹窗显示之后,您可以向其添加标题和内容。 在OpenLayers中,您可以使用Overlay类来实现弹窗的显示和关闭机制。Overlay类提供了打开和关闭弹窗的方法,以及设置弹窗内容的方法。通过将弹窗容器div作为Overlay的元素,您可以将其与地图关联起来,并实现在特定事件触发时显示弹窗。 总结一下,创建OpenLayers弹窗的步骤如下: 1. 在HTML页面中创建一个div元素,作为弹窗容器,并为其添加唯一的ID。 2. 使用CSS设置div元素的样式,以定义弹窗的外观。 3. 在OpenLayers中创建一个Overlay对象,将弹窗容器div作为其元素。 4. 监听地图上的特定事件,例如单击事件,当事件触发时,调用Overlay的打开方法以显示弹窗。 5. 在弹窗显示后,使用JavaScript动态添加标题和内容。 需要注意的是,弹窗的具体实现可能因您使用的OpenLayers版本和您的需求而有所不同。请确保参考OpenLayers的官方文档和示例代码以获取更详细和准确的信息。 参考资料: 目录 一、定义popup弹窗dom对象二、定义弹窗样式三、定义Overlay四、设置单击地图后弹窗显示信息五、设置弹窗关闭事件 要展示弹窗,我们首先需要一个dom对象来承载。 <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer" onclick="closePopup();"></a> <div id="popup-title" class="popup-title"></div> <div id="popup-content" class="popup-content"></div> </div> 二、定义弹窗样式 layer弹窗:top.layer弹窗到父页面跨域,通过postMessage方法将子页面的配置对象发送到父页面中,父页面再通过子页面的配置对象打开弹窗,对象内不能存在事件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值