Javascript 代码:

(function ($) {'use strict';window.alert = $.alert = function (msg) {var defaultOpts = {bodyClass: 'body-cover',mainClass: 'main-cover',alertClass: 'alert-cover'};var _body = $('body');//bodyvar _wrap = $('<div></div>');//遮挡层var _coverCotent = $('<div><div class="alert-close"><i class="fa fa-close"></i></div><div class="content"></div></div>');_body.addClass(defaultOpts.bodyClass); //设置body效果_body.append(_wrap);//添加遮挡层_wrap.addClass(defaultOpts.mainClass);//遮挡层添加样式_body.append(_coverCotent);//添加遮挡内容层_coverCotent.addClass(defaultOpts.alertClass);////添加遮挡内容层样式_coverCotent.find('.content').text(msg);_coverCotent.fadeIn('500');//点击遮挡层_wrap.unbind().bind('click', function () {_close();});//点击关闭按钮$(_coverCotent.find('i')).unbind().bind('click', function () {_close();});var _close = function () {_coverCotent.fadeOut('300', function () {_body.removeClass(defaultOpts.bodyClass);//移除bodycover样式_wrap.remove();//遮挡层移除_coverCotent.remove();//遮挡内容层移除
            });            }//定时销毁setTimeout(_close, 10000);}})(jQuery);

CSS 代码:

/*  cover body style */
.body-cover{overflow: hidden;}/*  wrap style */
.main-cover{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: #000;opacity: 0.8; filter: alpha(opacity=80);}/*  cover content style */
.alert-cover{position: fixed; z-index:99999; width:400px;min-height: 120px;top: 50%; left: 50%; margin-top: -80px; border-radius: 6px;margin-left: -200px;border: 1px solid #eee;box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5);background-color: white;display: none;}
.alert-cover .alert-close{height: 30px; text-align: right;cursor: pointer;padding-right: 10px;}
.alert-cover .content{text-align: center;}

效果:

转载于:https://www.cnblogs.com/307914070/p/4494421.html

覆盖alert对话框-自制Jquery.alert插件相关推荐

  1. 服务器控件在客户端触发alert对话框后,根据情况进行回发服务器操作

    通常,ASP.NET服务器控件出触发后,即使使用js引发了alert对话框,确认alert对话框后,也会造成回发 这篇讲诉如何点击服务器按钮控件,触发客户端alert后,在符合条件的情况下,才将信息回 ...

  2. asp.net ajax 弹不出alert对话框的解决办法

    用js脚本输出一些提示,可是不管是用 Page.RegisterClientScriptBlock还是用 Page.RegisterStartupScript 注册,该死的提示信息总是不出来.其实不是 ...

  3. TWebBrowser禁止弹出Alert对话框

    以前介绍过通过编写Webbrowser1的OnDocumentComplete事件响应代码可以拦截网页弹出的Alert等对话框,代码如下: procedure TForm1.WebBrowser1Do ...

  4. Delphi中点击网页弹出的Alert对话框的确定按钮

    实现的方法有很多,一般都是使用Windows API函数遍历窗口,查找指定标题的窗口,然后从该窗口查找确定按钮,向该按钮发送鼠标消息进行模拟点击.由于IE8由Alert弹出的网页对话框的标题是&quo ...

  5. 弹窗样式 idialog,purebox,artdialog4.1.2,jquery.alert.v1.2

    <script src="<?php echo $imgurl;?>/tools/media/js/jquery.iDialog.js"></scri ...

  6. 50个精心收集的惊人的jquery绚丽插件--功能全覆盖

    原文地址:http://www.cnblogs.com/58top/archive/2012/08/03/2622060.html TN3 Gallery – jQuery Slider and Im ...

  7. 超强1000个jquery极品插件!(连载中。。。。最近更新20090710)

    花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...

  8. jquery封装插件

    要点: 1.理清自己的思路,你要做什么的步骤 2.你的操作需要用到jquery的哪些方法 3.页面需要引入jquery包,和你自己插件的包 步骤: 1.插件的包装 编写一个jQuery插件开始于给jQ ...

  9. 超强1000个jquery极品插件!(感觉好强大,转载一下)

    花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...

最新文章

  1. 100M不限流量香港VPS服务器租用注意事项
  2. 【模板】单源最短路径(弱化版)
  3. Centos7入侵分析:分析SSH登录日志
  4. JavaScript——jQuery AJAX链式编程(流式编程)DEMO
  5. cmd输入net start mysql提示:服务名无效(解决方案笔记)
  6. mysql 删除版本信息_linux 删除mysql
  7. macos mysql8_macOS + MySql8 问题
  8. 获取列表的最后一个元素
  9. 关于js中的this关键字
  10. 又遇到jqGrid在chrome下宽度不正常有滚动条
  11. java游戏运行_用jar包运行带GUI的java游戏
  12. 项目创新特色概述及主要内容
  13. Mybatis通配符
  14. 大一计算机专业学期计划范文,【大一学习计划22篇】_大一学习计划范文大全_2021年大一学习计划_东城教研...
  15. idea的英文是什么意思_intellij是什么意思
  16. 用java打暴雪星际争霸(2)——运行测试机器人
  17. Swift可选类型(Optional)之星耀
  18. 运行Moblin Live映像 - for Mobin v2.1
  19. MySql前瞻,什么是数据库
  20. 信度不达标的处理方式

热门文章

  1. 查看php错误日志文件,php错误日志怎么看
  2. 《系统功能测试报告》
  3. oracle 视图编辑保存,oracle 视图
  4. 【HCIE考试喜报】2022年11月11日考试通过
  5. c语言程序教师节祝福,2015年教师节祝福语(大学生适用)
  6. 分页器的使用-2 手写一个分页器
  7. Xcode安装特定版本系统的模拟器(不支持断点下载所以总是下载失败)
  8. 移动端web开发---Touch事件详解
  9. Cannot use JSX unless the ‘--jsx‘ flag is provided.
  10. 符号函数(sign function)性质及应用