jQuery-自己封装的弹框
(function () {
CDK={
cfm:function(resFun,errFun){
var confirm=document.createElement('div');
confirm.setAttribute('style','position:fixed;top:0;left:0;width: 100%;height: 100%;z-index:99;background-color: rgba(0, 0, 0,0.3);');
$(confirm).addClass('confirmkuang');
$(confirm).html(
'<div class="addson" style="opacity:0;position:fixed;top:40%;left:40%;z-index: 9999;min-width:260px;max-width:260px;min-height:100px;margin:auto;background:#fff;border-radius:2px;color: #000;-moz-box-shadow:0px 0px 14px #858585; -webkit-box-shadow:0px 0px 14px #858585; box-shadow:0px 0px 14px #858585;"><div style="padding: 0 80px 0 20px;height: 42px;line-height: 42px;border-bottom: 1px solid #eee;font-size: 14px;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;background-color: #F8F8F8;border-radius: 2px 2px 0 0;position: relative;">提示框<span style="position: absolute;right: 15px;font-size: 15px;cursor:pointer;" class="closealter">✖</span></div><p style="padding:10px;word-break: break-all; overflow: hidden; font-size: 16px;overflow-x: hidden;overflow-y: auto;">确定要执行此操作吗?</p><div style="text-align: right;padding: 0 15px 12px;"><button style="border-color: #1E9FFF;background-color: #1E9FFF;color: #fff;height: 28px;line-height: 28px;margin: 5px 5px 0;padding: 0 15px;border: 1px solid #dedede;border-radius:3px;font-weight: 400;cursor: pointer;text-decoration: none;" class="closealter addConfirm">确认</button><button style="height: 28px;line-height: 28px;margin: 5px 5px 0;padding: 0 15px;border: 1px solid #dedede;background-color: #fff;color: #333;border-radius:3px;font-weight: 400;cursor: pointer;text-decoration: none;" class="closealter">取消</button></div></div>'
)
$("body").append(confirm);
$('.addson').animate({'opacity':'1'},400)
$('.addConfirm').on('click',function(){
if (resFun){
resFun();
}
})
$('.closealter').on('click',function(event){
$('.addson').animate({'opacity':'0'},400)
setTimeout(function(){
$('.confirmkuang').remove()
},400)
})
}
}
})(jQuery);//(jQuery)代表jQuery执行完毕后
调用:
js事件函数直接调用
CDK.cfm(res=>{
console.log('确认执行')
},err=>{
console.log('取消执行')
})
<button class="trigger">弹框</button>
<script type="text/javascript">
$(function(){
$('.trigger').on('click',function(){
CDK.cfm(res=>{
console.log('aa')
},err=>{
return
})
})
})
</script>
jQuery点击调用

jQuery-自己封装的弹框的更多相关文章
- 封装dialog弹框
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport&quo ...
- vue封装一个弹框组件
这是一个提示框和对话框,例: 这是一个组件 eject.vue <template> <div class='kz-cont' v-show='showstate'> &l ...
- jQuery插件封装系列(一)—— 金额录入框
基于jQuery原型封装数值录入框,禁止录入.粘贴非数值字符 (function ($) { // 数值输入框 $.fn.numbox = function (options) { var type ...
- vue封装公用弹出框方法,实现点击出现操作弹出框
vue封装公用弹出框方法,实现点击出现操作弹出框 如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...
- 移动端(H5)弹框组件--简单--实用--不依赖jQuery
俗话说的好,框架是服务与大家的,包含的功能比较多,代码多.在现在追求速度的年代.应该根据自己的需求去封装自己所需要的组件. 下边就给大家介绍一下自己封装的一个小弹框组件,不依赖与jQuery,代码少, ...
- jquery dialog-优雅的弹出框
前面一章已经对datepicker的使用,做了简单的说明.这一章主要对dialog如何使用做个说明. jquery ui-dialog在web开发中运用还是比较多的.最常见的例子就是登 ...
- jquery mobile将页面内容当成弹框进行显示
注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...
- jquery EsayUi 里一个小弹框
网站后台大多的数据展示就都用和此插件有着密切的关系: 来用一下这个小弹框吧: 一个Html里面的代码 <link rel='stylesheet' type='text/css' href='c ...
- 基于Jquery 简单实用的弹出提示框
基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...
随机推荐
- python批量导出项目依赖包及批量安装的方法
在Python中我们在项目中会用到各种库,自带的自然不必再说,然而如果是三方库,则在进行项目移植时通常需要在新的环境下安装需要的三方库文件,面对较大项目中众多的三方库,可以先将项目依赖库导出到txt文 ...
- 洛谷1602 Sramoc问题
刚看到这道题的时候感觉像spfa. 然后发现其实bfs就可以做了. //Serene #include<algorithm> #include<iostream> #inc ...
- n!素因子p的幂 swjtuOJ 2090【数论】
原文地址:http://blog.csdn.net/u012717411/article/details/47334969(感谢作者) 素因子分解写的非常好!数论一道好题:给以两个大整数n,s(n&l ...
- 搭建OA项目环境及卸载指南
一.项目介绍 1).JDK是什么? 全称:Java Development Kit 中文名:java开发工具包 作用:提供java项目的运行环境 JDK安装 a.jdk.jre 安装 ...
- time 与 data time
>>> import datetime>>> datetime.datetime.now()datetime.datetime(2018, 5, 30, 15, 3 ...
- Ubuntu18.10创建软件图标
解压下载包都/opt目录 创建并编辑/usr/share/applications/xxx.desktop [Desktop Entry] Encoding=UTF-8 Name=Pycharm Co ...
- 容器化ICT融合初体验
[编者的话]本次将分享的容器化ICT融合平台是一种面向未来ICT系统的新型云计算PaaS平台,它基于容器这一轻量级的虚拟化技术以及自动化的"微服务"管理架构,能够有效支撑应用快速上 ...
- CODE FESTIVAL 2017 qual B B - Problem Set【水题,stl map】
CODE FESTIVAL 2017 qual B B - Problem Set 确实水题,但当时没想到map,用sort后逐个比较解决的,感觉麻烦些,虽然效率高很多.map确实好写点. 用map: ...
- 基于GIS的空间分析功能分析芝加哥小熊队和白袜队的球迷范围
将交换格式的文件转换为要素类 在ArcCatalog中新建地址定位器 设置地址定位器的样式 选择Arctoolbox->地理编码工具->对地址进行地理编码 定义坐标系 定义坐标系后如图所示 ...
- NOIP2007 树网的核 && [BZOJ2282][Sdoi2011]消防
NOIP2007 树网的核 树的直径的最长性是一个很有用的概念,可能对一些题都帮助. 树的直径给定一棵树,树中每条边都有一个权值,树中两点之间的距离定义为连接两点的路径边权之和.树中最远的两个节点之间 ...