平时我们想要显示一些提示信息时会用到alert方法,alert是全局的一个方法,会短暂的中断程序,我们主要用来显示提示客户信息。但是这个方法有一定的局限性,而且本身样式也不够美观。于是我封装了一个实用的插件,我们封装的MyAlert实现了alert方法的功能,与系统的alert不同的地方在于MyAlert可根据用户的需要来决定是否进行下一步的操作。

代码很简单,只有28行,封装的很好,放在那里都可以应用。封装的时候考虑了两点要素:

1、我们不能中断程序的进程,于是加了一个遮罩放在body上面,注意只是body是不能操作的,浏览器可以随便操作(比如刷新页面,后退页面操作)。

2、提示框带有"确定"和"取消"两个按钮可供用户选择,比如用户不小心点击某个按钮,提示框弹出后,用户可点击取消,取消按钮内部实现流程就是去掉页面遮罩和提示框。而确定按钮由程序员根据业务场景来实现MyAlert参数中的回调函数即可。当然,我们可以在实现MyAlert时候来决定是否添加取消按钮。

下面是我的代码:

function myAlert(str,click,useCancel){
var overflow="";
var $hidder=null;
var clickHandler=click||$.noop;
var myClickHandler=function(){
$hidder.remove();
$("body").css("overflow",overflow);
clickHandler($(this).html()=="确定");
};
var init=function(){
$hidder = $("<div style='width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;text-align: center;position:fixed;left:0;top:0;'></div>");
var $myalert = $("<div style='width:300px;position:absolute;top:30%;left:50%;margin-left:-150px;padding:20px;background:#fff;border-radius:5px;'>"+
"<div style='padding-bottom:10px;border-bottom:1px solid #e5e5e5;font-size:20px;color:#f83;'>温馨提示</div></div>")
.appendTo($hidder);
$("<div style='padding:10px 0;color:#333;border-bottom:1px solid #e5e5e5;'>"+str+"</div>").appendTo($myalert);
var $myalert_btn_div = $("<div style='padding-top:10px;'></div>").appendTo($myalert);
var $okBtn = $("<div style='float:left;width:100%;color:#eee;border-radius:2px;padding:7px 0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;' class='bluebg1'>确定</div>")
.appendTo($myalert_btn_div).click(myClickHandler);
if(useCancel){
$okBtn.css({"width":"50%","border-right":"5px solid #fff"});
$("<div style='float:left;width:50%;border-left:5px solid #fff;border-radius:2px;padding:7px 0;color:#fff;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:#ccc;'>取消</div>")
.appendTo($myalert_btn_div).click(myClickHandler);
}
overflow=$("body").css("overflow");
$("body").css("overflow","hidden").append($hidder);
};
init();
}

下面是我的应用场景,假如页面只有一个button按钮:

$("button").click(function(){
myAlert("是否跳转到百度页面?",function(f){
if(f){
window.open("http://www.baidu.com");
}
},true);
})

点击取消按钮即执行MyAlert函数内部myClickHandler函数,但是回调函数的参数为false,所以并不能执行我们定义在myAlert执行时的函数内部的操作。或者我们也可以试一下点击确定会怎样:

我们也可以只是作为提示消息框使用,只显示想要提示给用户的信息,用户并不能决定流程。只需要把myAlert函数的第三个参数去掉就ok。

$("button").click(function(){
myAlert("是否跳转到百度页面?",function(f){
if(f){
window.open("http://www.baidu.com");
}
});
})

操作过程如上。

JavaScript封装一个MyAlert弹出框的更多相关文章

  1. JavaScript 实现简单的 弹出框关闭框

    JavaScript 实现简单的 弹出框关闭框 知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素 代码献上: & ...

  2. javascript基于对象的弹出框封装

    先睹为快,移动端:戳这里,打开页面后点击投票查看效果.PC端测试直接切换body的overflow属性:hidden和auto一样可以,比下面相对简化,又有人说这样偶尔不行..如果你知道优缺点欢迎给出 ...

  3. html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果

    模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...

  4. Vue自行封装常用组件-弹出框

    使用方法: 1.在父组件中引入"box.vue" //import popUpBox from "./box.vue";   2.在父组件中注册 popUpBo ...

  5. 安卓开发之自定义一个view弹出框

    https://www.cnblogs.com/muyuge/p/6152167.html

  6. 【原创】贡献一个JS的弹出框代码...

    一.前言 最近在做一个项目,自己感觉系统自带的alert()方法的弹出框实在是不堪入目,所以在网上找了一些资料,然后自己加工了一下,做出了自己的一个js弹出框,在这里贡献出来,希望对你有帮助. 二.开 ...

  7. Android 学习笔记之AndBase框架学习(二) 使用封装好的进度框,Toast框,弹出框,确认框...

    PS:渐渐明白,在实验室呆三年都不如在企业呆一年... 学习内容: 1.使用AbActivity内部封装的方法实现进度框,Toast框,弹出框,确认框...   AndBase中AbActivity封 ...

  8. JavaScript 弹出框

    JavaScript 有三种类型的弹出框:警告框.确认框和提示框. 警告框 如果要确保信息传递给用户,通常会使用警告框. 当警告框弹出时,用户将需要单击“确定”来继续. 语法 window.alert ...

  9. ASP.NET中的几种弹出框提示

    B/S不像C/S那样一个MessageBox就可以弹出提示框,不过可以通过js的“Alert”来弹出消息,或者通过一些变种的js方法.下面我给大家介绍几种,希望大家喜欢. 四种弹出框代码: prote ...

随机推荐

  1. input file样式修改,图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

  2. C#去掉JSON字符串中的最后一个数字

    这个问题总结起来就是去掉字符串中的最后一个"," 字符串:string s = "1,2,3,4,5," 目标:删除最后一个 "," 方法: ...

  3. 初笔,JAVA.HelloWorld代码详解

    HelloWorld.java //文件名 public class HelloWorld{ public static void main(String[] args){ System.out.pr ...

  4. win10*64+vs2015+opencv3.0工程模板配置

    参考网上的资料,自己再次整合一下,为新手提供个方便,也为自己备份. 一.下载安装opencv3.0 1.首先下载opencv3.0的包(windows版本的) 2.安装opencv,路径自己选好,自动 ...

  5. 【有意思的BUG】浏览器的Title和Icon

    序:Icon在术语上也称为"ico",比如豆瓣的ICON地址:http://img3.douban.com/favicon.ico 先贴一张图,有助于理解这篇文档的标题--< ...

  6. 王佩丰第2讲-excel单元格格式设置 笔记

    点小箭头都可以进入单元格格式设置 跨越合并 添加斜线 回车 ALT+ENTER 格式刷 数字格式 特定红色 货币VS会计专用 日期 2是1月2号,3是1月3号-- 自定义[例子中是在数值后面加&quo ...

  7. 关于JS的DOM操作——重要实例的操作

    1.复选框与按钮的配合使用的DOM操作 <body>                <input type="checkbox" id="ckb1&qu ...

  8. python编程基础—正则表达式

    正则表达式 正则表达式就是描述字符串排列的一套规则.利用正则表达式可以做很多事情,主要用于字符串的匹配 在实际项目中,我们经常需要找到某一类符合某种格式的信息,此时,我们可以观察这些数据的规律,然后将 ...

  9. 如何理解iOS的“对象等同性”

    在iOS开发过程中,我们经常需要用到等同性来判断两个对象是否相等,通常我们会使用==来判断,但是这样比较出来的结果可能不是我们期望的:所以,一般我们会使用NSObject协议声明的isEqual方法来 ...

  10. web workers工作线程

    web worker工作线程是Html5里面提出来的一个新api,对于JavaScript我们的印象是单线程执行,如果运行复杂运算的时候,页面可能就会失去响应,是运行在后台的javascript,独立 ...