覆盖alert对话框-自制Jquery.alert插件

Javascript 代码:

(function ($) {
    ‘use strict‘;

    window.alert = $.alert = function (msg) {
        var defaultOpts = {
            bodyClass: ‘body-cover‘,
            mainClass: ‘main-cover‘,
            alertClass: ‘alert-cover‘
        };

        var _body = $(‘body‘);//body
        var _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;}

效果:

时间: 2024-10-24 16:04:01

覆盖alert对话框-自制Jquery.alert插件的相关文章

自制jQuery标签插件

在项目中需要一个添加标签的小插件,查看了一些已有插件后,发现很现成的高级插件,也有比较简单的插件.最后还是决定自己来写,这样能控制代码,以后与其他插件结合使用的时候能更好的把控.初步在IE6 7 8,firefox,chrome中做了测试,可以通过. 我是仿照163邮箱中添加邮箱的方式写的,插件如下: 一.制作静态效果 先用html和css做出个样子出来,然后再根据样式来做动态效果. <h2 style="padding:10px">静态效果</h2> <

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

通常,ASP.NET服务器控件出触发后,即使使用js引发了alert对话框,确认alert对话框后,也会造成回发 这篇讲诉如何点击服务器按钮控件,触发客户端alert后,在符合条件的情况下,才将信息回发.这篇采用的是form认证方式验证用户身份,有关form认证的案例过程,我将单独开辟博客讲解. 步骤一.服务器后台Page_Load事件 public int isLoginUser; protected void Page_Load(object sender, EventArgs e) { i

JavaScript 和 jQuery $.alert alert $.confirm confirm 的对比

JavaScript 和 jQuery  弹窗对比 javascript 的三种弹框对象隶属于window对象,并且都会阻塞当前事件和脚本,直到用户操作完成才会继续执行后续事件和脚本.不能使用html元素. jQuery(jquery-confirm插件) jQuery的弹出窗口是通过html元素和一些js事件模拟出来的,隶属于document对象,而且不能够阻塞其他的事件和脚本执行. 例: jQuery 脚本 脚本1: var $confirm= $.confirm('是否继续?');  //

IOS开发学习笔记-(2)键盘控制,键盘类型设置,alert 对话框

一.关闭键盘,放弃第一响应者,处理思路有两种 ① 使用文本框的 Did End on Exit 绑定事件 ② UIControl on Touch 事件 都去操作 sender 的  resignFirstResponder #import <UIKit/UIKit.h> @interface ViewController : UIViewController @property (weak, nonatomic) IBOutlet UITextField *txtUserName; @pro

TWebBrowser禁止弹出Alert对话框

以前介绍过通过编写Webbrowser1的OnDocumentComplete事件响应代码可以拦截网页弹出的Alert等对话框,代码如下: procedure TForm1.WebBrowser1DocumentComplete(Sender: TObject;  const pDisp: IDispatch; var URL: OleVariant);begin  ((Sender as TWebBrowser).Document as IHtmlDocument2).parentWindow

jQuery提示插件alertify使用指南!

jQuery提示插件alertify使用指南 alertifyjs是一个非侵入式,可定制的JavaScript通知组件.包括可定制的对话框,和右下角消息弹出框.完全可定制的警报,确认和提示对话框.完全自定义的通知系统.回调参数处理包括"确定"和"取消"按钮的点击.允许对话框排队 1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文件 主要使用三个文件,两

jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象

一.前提说明 Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 二.简单介绍 本文演示的是:jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象 $('#myForm').ajaxForm(function() { $('#output1').html("提交成功!欢迎下次再来!").show(); }); $('#myForm2').sub

实用的 jquery 小插件

1 /** 2 * ---------------------------------------------------- 3 * 实用的 jquery 插件方法 4 * @QQ 617937424 5 * @寄语 不要重复写同样的代码,学会封装成方法,慢慢积累,提高效率. 6 * ---------------------------------------------------- 7 */ 8 9 10 /** 11 * 全选/反选 12 * 13 * html结构: 14 <div i

用jQuery开发插件详解

jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法.下面就两种函数的开发做详细的说明. 1.类级别的插件开发 类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法.典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中.关于类级别的插件开发可以采用如下几种