平时我们想要显示一些提示信息时会用到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. 用 Node.js 把玩一番 Alfred Workflow

    插件地址(集成Github.掘金.知乎.淘宝等搜索) 作为 Mac 上常年位居神器榜第一位的软件来说,Alfred 给我们带来的便利是不言而喻的,其中 workflow(工作流) 功不可没,在它上面可 ...

  2. 浅尝Java(二、代码折叠插件的使用)

    主题:eclipse代码折叠插件的使用. 工作中在使用eclipse开发Java项目时,我们会写很多if,for循环啊什么的,这使得我们的项目代码会有很多很多行.写完后要想检查或者查看,就要从头一行一 ...

  3. insertBefore 和 insetAfter函数详解

    在Javascript DOM编程艺术上面讲到,insertBefore(   )函数,即在已有元素前面插入一个新元素: 语法: parentElement . insertBefore(newEle ...

  4. AIX系统备份相关知识

    AIX系统备份相关知识 --------------------------2013/10/16 预备知识.1.rootvg类似于windows中的C盘,即系统vg,这个vg上面当然也可以划分用户的逻 ...

  5. Dynamics CRM:Word Template Feature 的使用和实际遇到问题解决方案

    Word Template 是Dynamics CRM 2016 中的其中一个新的功能.Word Template 就是文档模板,用于在Dynamics CRM中定义文档模板,从而对实体记录按照文档模 ...

  6. JavaWeb(二)jsp运行原理,九大内置对象

    JSP运行原理: 每个JSP页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理.JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet) ...

  7. Java中Lock,tryLock,lockInterruptibly的区别

    转载自:https://www.zhihu.com/question/36771163/answer/68974735 ReentrantLock 锁有好几种,除了常用的lock ,tryLock , ...

  8. 关于web.xml中的<welcome-file-list>

    关于web.xml中的<welcome-file-listgt; WebXMLSpringJSPTomcat 问题: <welcome-file-listgt;中的<welcome- ...

  9. Python 可迭代的对象、迭代器和生成器

    迭代是数据处理的基石.扫描内存中放不下的数据集时,我们要找到一种惰性获取数据项的方式,即按需一次获取一个数据项.这就是迭代器模式(Iterator pattern). p.p1 { margin: 0 ...

  10. html canvas-nest.js 源码

    // canvas_width || r.x canvas_height || r.y = e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.0 ...