基于Layer的弹窗,tips弹窗,tips询问弹窗

基于Layer的弹窗

方法重新封装了 layer.tips 使用前,请仔细阅读此文本
* @Author: 羽渡尘
* @两种实现方法
* @需要引用jquery.js、layer.js、ydcTip.js
* @统一可传递的参数形式
let option = {
    /*加载您的自定义样式文件(注意*样式文件必须在layer/skin目录下)*/
    extend: 'yourskin/yourskin.css',
    /*layer.tips参数 可见layer文档*/
    tips: [{
        tips: 3,
        tipsMore:false,
        skin:'layer-ext-yourskin',
        time : 0
    }],
    /*提示内容*/
    title : '确定要删除吗?',
    /*可以传递任意参数形式 以原形式携带*/
    obj : [obj],
    /*自定义按钮及触发方式 可携带参数,为了方便您的DIY,按钮都为span标签*/
    btn:[{
        /*按钮名称 :["方法名称","触发器","唯一标识类似于id通过ydc-sign获取(attr("ydc-sign"))","{传递参数}"]
        方法会自带一个取消按钮,如果不满足需求请自定义方法名称带有close的按钮,将会替换默认取消按钮*/
        '确定':['delInit','click','sign_id1','{"id":"id","meetType":"meetType"}'],
        '取消':['l_close',"click",'sign_id2','{"id":"id","meetType":"meetType"}']
    }]
};

第一种 使用示例 ---------------------------------------------------
你可以在单独的按钮上配置
<a href="javascript:void(0)"
class="btn-ydc-tips font-blue"
data-ydctips='{"btn":[{"确定":["delInit","click","sign_id1",{"id":"id","meetType":"meetType"}]}]}'>Example</a>
必要的class名:btn-ydc-tips
必要的传参:data-ydctips

第二种 使用示例 ---------------------------------------------------
<a href="javascript:void(0)" onclick="example(this,'参数')">Example</a>
function example(obj,参数) {
        let option = {
            title : '确定要删除吗?',
            btn:[{
                '确定':['delInit','click','sign_id1','{"id":"id"}']
            }],
            ..........
        };
        ydcLayFun.customize(option,obj);
}

* @关于配置的按钮回调
function delInit(val,obj) {
    //val内参数示例
    val = {
        btn_this: object //自动携带当前触发元素
        id: "id"
        meetType: "meetType"
    }
    obj 为你传递的任意参数形式 以原形式携带
}


* @关于自定义样式文件 ---------------------------------------------
layer提供了强健的皮肤扩展接口,这意味着如果你对layer默认的样式不太满意,你还有更多的选择。
第一步:存放
将您下载的皮肤包(假设文件夹名为:myskin)解压。
如果是独立版的layer,则将myskin存放在skin目录下
如果是layui中使用layer,则将myskin存放在css/modules/layer目录下
第二步:使用
1. 全局配置
layer.config({
  extend: 'myskin/style.css', //加载新皮肤
  skin: 'layer-ext-myskin' //一旦设定,所有弹层风格都采用此主题。
});
2. 局部使用
layer.config({
  extend: 'myskin/style.css' //同样需要加载新皮肤
});
//单个使用
layer.open({
  skin: 'layer-ext-myskin' //只对该层采用myskin皮肤
});
//也就是说,无论你全局还是局部,都要通过layer.config的extend来加载样式。

示例效果

文件下载

提取码:vn0v、文件ydcTip.js
提取码:ac8s、ydcTip.css

jquery.js、layer.js,请自行官方下载。
  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
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方法将子页面的配置对象发送到父页面中,父页面再通过子页面的配置对象打开弹窗,对象内不能存在事件。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值