基于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，请自行官方下载。

基于Layer的弹窗，tips弹窗，tips询问弹窗相关推荐

添加弹窗_阻止电脑广告弹窗窗口让电脑桌面更清洁
在使用计算机上网过程中,经常会弹出一些广告弹窗,这些弹窗或者会干扰到我们的使用计算机的体验,有的则会对桌面内容进行一些遮挡,非常可恶. 那么我们怎么对广告弹窗进行拦截不让它们干扰我们使用计算机呢? 我 ...
Android 天气APP（十三）仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整
上一篇:Android 天气APP(十二)空气质量.UI优化调整天气预报详情,逐小时预报详情新版------------------- 一.适配器点击监听二.页面实现三.天气预报详情弹窗四. ...
JS函数自定义弹窗；纯JS实现弹窗
弹窗获取弹窗内穿出的数据: 在弹窗页面调用父级页面的方法,例:parent.xxx(data); 在 xxx()方法中将获取到的数据赋值给 abc 变量:在的点击弹窗确定按钮后调用 yyy()方法, ...
element label动态赋值_基于Element封装可拖动放大缩小的弹窗
ElementUI 自带的对话框组件(el-dialog)没有拖动和最小化的处理,目前业务遇到呼叫弹屏处理,基于el-dialog 再次进行封装下,上篇文章有人说图片换成代码就好了,下面代码部分我就直 ...
基于layer mobile手机端弹出框，询问框（PC端推荐layer和artDialog：http://download.csdn.net/download/cometwo/9437895）...
layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...
基于vue 2.x的移动端网页弹窗插件wc-messagebox（支持Alert，Confirm，Toast，Loading）
参考文档:GitHub - helicopters/wc-messagebox: 基于 Vue 2.0 开发的 Alert, Toast, Confirm 插件, UI仿照 iOS 原生 ①安装插件: ...
php 右下脚弹窗,纯js的右下角弹窗实例代码
下面小编就为大家带来一篇纯js的右下角弹窗实例代码.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上 ...
ios uiwindow弹窗_iOS 你需要的弹窗大全
在我们的实际开发项目中,弹窗是必不可少的,很多时候我们用的是系统的AlertViewController,但是实际情况中,并不能满足我们的开发需求,这个时候我们需要的就是自定义自己的弹窗效果.接下来我 ...
html网页底部弹窗,【HTML】底部弹窗插件代码
点滴记忆欢迎访问点滴记忆!请收藏本站域名:https://www.cnblogs.com/HGNET/ 立即查看 .layui-icon { font-family: layui-icon!impo ...

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

基于Layer的弹窗

示例效果

文件下载

基于Layer的弹窗，tips弹窗，tips询问弹窗相关推荐

最新文章

热门文章