/*错误提示框*/
var wr = function() {
var wrap = '<div class="wrapBox opacity">&nbsp;</div>';
var callback;
var me = this;
var htmlBox = '<div class="alertBox opacity"></div>';
// 遮罩显示
me.faIn = function faIn(callback) {
$('body').append(wrap);
$(wrap).fadeIn(150, function() {
$('.bodyBox').addClass('overAuto');
if (callback) {
callback();
}
;
});
};
// 遮罩隐藏
me.faOut = function(callback) {
$('.wrapBox').fadeOut(150, function() {
$('.bodyBox').removeClass('overAuto');
if (callback) {
callback();
}
;
$(this).remove();
});
};
// 公共提示框
me.alert = function(message, callback) {
if(message){
var pHtml = '<p>' + message + '</p>';
var inhtml = $(htmlBox).append(pHtml);
$('body').append(inhtml);
$(inhtml).fadeIn(250, function() {
setTimeout(function() {
$(inhtml).fadeOut(150, function() {
$(this).html('');
$(this).remove();
});
if (callback) {
callback();
}
}, 2000);
});
} }; me.alertHide=function(){
$('body').find('.alertBox').fadeOut(0,function(){
$(this).html('');
$(this).remove();
});
}; // 电话
me.tel = function(tel, callback) {
var tel = '<p class="telBox"><a href="tel:' + tel + '">' + tel
+ '</a></p>';
if (callback) {
callback();
}
$('body').append(htmlBox);
$('body').append(tel);
$(htmlBox).fadeIn(250);
$('.alertBox').click(function() {
$('.telBox').fadeOut(150, function() {
$(this).remove();
});
$(this).fadeOut(0, function() {
$(this).html('');
$(this).remove(); });
});
};
};
var wrap = new wr();

js公共弹出窗插件的更多相关文章

  1. 简洁的Jquery弹出窗插件

    做项目时,很多时候都需要弹窗提示.如果要求不是很严格的项目,直接使用alert就可以搞定.对于需要高度定制化的项目,而且要求比较高的时候,就需要设计符合整体风格的弹出层,这种有美工帮忙,也比较好搞定. ...

  2. js登录弹出框插件

    第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...

  3. 推荐一款适合Dynamics 365/Dynamics CRM 2016 使用的弹出窗插件AlertJs

    Github地址: https://github.com/PaulNieuwelaar/alertjs 目前有两个版本,3.0版本(30天免费试用)以及2.1版本(完全免费) ------------ ...

  4. 纯js文件弹出窗写法

    <dialog id="myDialog"> 01234567890 <a href="javascript:;" id="clos ...

  5. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

  6. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  7. bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用 深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX

    bootstrap-data-target触发模态弹出窗元素的data使用 时间:2017-05-27 14:22:34      阅读:4479      评论:0      收藏:0      [ ...

  8. Bootstrap模态弹出窗

    Bootstrap模态弹出窗有三种方式: 1.href触发模态弹出窗元素: <a class="btn btn-primary" data-toggle="moda ...

  9. jQuery弹出层插件popbox

    都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片 可自定义按钮及按钮的样式.点击事件 可指定选择器选择页面元素 ...

随机推荐

  1. bzoj2553 禁忌

    题目链接 题意 给出一个\(n\)个字符串的字典.对于一个字符串,他的贡献是这个字符串中最多的在字典中出现的不重叠子串的数量. 然后问一个长度为\(len\)的,字符集为前\(alphabet\)个字 ...

  2. Java 多线程篇

    先举个例子 计算机的核心是CPU,它承担了计算机所有计算任务,可以把它理解为像一个工厂,时刻在运行. 假定工厂有一个电力系统,工厂有很多车间,一次只能供给一个车间使用,也就是说一个车间开工的时候,其他 ...

  3. http请求415错误Unsupported Media Type

    王子乔 每一个认真生活的人,都值得被认真对待 http请求415错误Unsupported Media Type 之前用了封装的ajax,因为请求出了点问题,我试了下jQuery的$.ajax,报出了 ...

  4. struts2 数据转换器

    四.数据类型的转换(明白原理,实际开发中几乎不用) 1.开发中的情况: 实际开发中用户通过浏览器输入的数据都是String或者String[]. String/String[]————填充模型(set ...

  5. JMeter-Java压力测试工具-01

    先去官网下载 打开 下面测试一个小栗子 建立一个工程,提供一个查询接口 package com.example.demo; import org.springframework.web.bind.an ...

  6. echarts图Y周坐标轴文字过长的解决方案

    解决方案  只贴出关键代码 在翻看echarts文档的过程中我看到了坐标轴文字可以自行定义模板,于是想到了我给一个固定12的字数限制,超出部分以省略号代替,这样就不会造成图形范围忽大忽小了. axis ...

  7. Microsoft Windows CVE-2017-8464 LNK 远程代码执行漏洞(复现)

    2017年6月13日,微软官方发布编号为CVE-2017-8464的漏洞公告,官方介绍Windows系统在解析快捷方式时存在远程执行任意代码的高危漏洞,黑客可以通过U盘.网络共享等途径触发漏洞,完全控 ...

  8. qml: 另类图像轮播;

    一般来说,图像轮播都是采用ListView等model进行设计, 比较方便.  这里展示我自己设计的图像轮播 方案, 仅采用两个QImage实现: 下面展示代码以及简述:(注:  以下代码为本人原创, ...

  9. pxc5.7配置安装

    pxc5.7配置安装 一.准备工作 # Centos6. 最小化安装操作系统 ########################---- Centos最小化安装推荐常用依赖包---- ######### ...

  10. mariadb-5.5安装

    mariadb-5.5 Windows10安装 1.官网下载:https://downloads.mariadb.org/ 2.解压mariadb-5.5.58-winx64.zip,目录C:\mar ...