/*错误提示框*/
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. 【洛谷P1483】序列变换

    题目大意:给定一个长度为 N 的序列,有 M 个操作,支持将下标为 x 的倍数的数都加上 y,查询下标为 i 的元素的值. 题解:由于查询操作很少,相对的,修改操作很多.若直接模拟修改操作,即:枚举倍 ...

  2. git的使用命令

    git archive --format zip --output "./test.zip" master -0 将项目的代码通过上述命令打包压缩为test文件夹 ssh-keyg ...

  3. ImageMagickObject.MagickImage.1 '80041771' - 安装vc2008运行库

    今天重装了系统后,发现 ImageMagick 不能正常的使用了: ImageMagickObject.MagickImage.1  '80041771' convert: 455: unable t ...

  4. ElasticSearch6.1.1集群搭建

    其实早就想研究ES了,因为之前用solr,资料较少(这倒不是问题,有问题去官网读文档),貌似用的人比较少?(别打我)前几天去京东面试,我觉得有必要了解一下es,昨天晚上简单了解了官方文档,今天居然鼓捣 ...

  5. Eclipse搭建SpringBoot之HelloWorld

    你的eclipse需要先安装 Spring Tool Suite™ 第一种方法(不建议,之所以贴上是因为探索的过程) 首先新建Maven工程 勾选第一个按钮,第三个是选择working set ,你可 ...

  6. poj 1523"SPF"(无向图求割点)

    传送门 题意: 有一张联通网络,求出所有的割点: 对于割点 u ,求将 u 删去后,此图有多少个联通子网络: 对于含有割点的,按升序输出: 题解: DFS求割点入门题,不会的戳这里

  7. HTML学习笔记Day16

    一.CSS 3D 1.什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于2d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向 2.C ...

  8. Js封装的动画函数实现轮播图

    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...

  9. 正则表达式(_ % regexp_like)

    '[^\.0-9]'——不含小数点和数字的字符串,^在中括号内表非 select '123' aa from dual where regexp_like( '123', '[^\.0-9]' ) - ...

  10. Java抽象类、接口整理

    抽象类 5.1抽象类产生(上标为A) 编写一个类时,会给该类定义一些方法,这些方法是用来描述功能和具体实现的方式,这些方法都有方法体 例如:一个图形类应该有周长的方法,但是不同的图形求周长方法不一样. ...