这个简单的类似alert的函数,效果还行,至于css样式,那没的说了,笔者确实尽力了,如果读者觉得太烂,你可以随便改函数的样式的,反正,笔者觉得还可以,呵呵。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>实现类似alert效果的函数</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style> </head>
<body> </body>
</html>
<script type="text/javascript">
(function(){
//实现类似alert炫酷效果的函数
function aler(str){
//弹出的div由遮罩层里面的弹出框以及按钮组成。
//给div的style添加z-index:9999,数值越大,div越在最上面
//rgba(0~255,0~255,0~255,opacity)opacity透明透明度为0~1,只设置背景颜色为透明
//生成弹出的div,也是遮罩层
var ale = document.createElement('div');
ale.setAttribute("style","background: rgba(0, 0, 0,0.5); position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; user-select: none; z-index:1032;");
//给遮罩层添加id属性,为的是下面点击按钮时删除掉它
ale.setAttribute("id","mask");
//弹出的div添加到body中
document.body.appendChild(ale);
//生成弹出框
var po = document.createElement('div');
//弹出框添加到弹出的div遮罩层中
ale.appendChild(po);
//获取弹出div对象
var mask = document.getElementById('mask');
//按钮,绑定div弹出层的点击删除事件
var btn = '<button onclick="document.body.removeChild(mask);">确定</button>';
//弹出框的高度和宽度、背景颜色
var H = 200,W = 240,backgroundcolor = '#F8931D';
//获取实际页面的left值。(页面宽度减去元素自身宽度/2)
var Left = (document.documentElement.clientWidth-W)/2;
//获取实际页面的top值。(页面宽度减去元素自身高度/2)
var top = (document.documentElement.clientHeight-H)/2;
//给弹出框设置属性
po.setAttribute('style','width:'+W+'px;height:'+H+'px; background-color:'+backgroundcolor+';border:1px solid #000;position:absolute;'+'top:'+top+'px;'+'left:'+Left+'px;');
po.innerHTML= '<div style="line-height:'+H*6/7+'px;text-align:center;width:'+W+'px;height:'+H*6/7+'px;">'+str+'</div>' + '<div style="line-height:'+H*1/7+'px;text-align:center;width:'+W+'px;height:'+H*1/7+'px;">'+btn+'</div>';
}
//返回Aler函数,取名为Alert
return window.Alert=aler;
})();
Alert('hello world');
alert('确定');
</script>

实现js的类似alert效果的函数的更多相关文章

  1. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  2. 原生js实现自定义alert风格和实现

    2018年6月29 最新更新 添加函数节流,解决多次点击问题,添加单例模式,提高代码性能. <!DOCTYPE html> <html lang="en"> ...

  3. 利用原生JS实现类似浏览器查找高亮功能(转载)

    利用原生JS实现类似浏览器查找高亮功能 在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求 在.content中有许多.box,需要在.box中找出搜 ...

  4. js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么

    js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...

  5. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

  7. Turn.js 实现翻书效果的学习与总结

    最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...

  8. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  9. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

随机推荐

  1. Linux crontab 命令格式与具体样例

    基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...

  2. Robots协议具体解释

    禁止搜索引擎收录的方法(robots.txt) 一.什么是robots.txt文件? 搜索引擎通过一种程序robot(又称spider),自己主动訪问互联网上的网页并获取网页信息.您能够在您的站点中创 ...

  3. careercup-树与图 4.5

    4.5 实现一个函数,检查一棵二叉树是否为二叉查找树. 参考:http://blog.csdn.net/sgbfblog/article/details/7771096 C++实现代码: #inclu ...

  4. 玩转Android之MVVM开发模式实战,炫酷的DataBinding!

    C# 很早就有了MVVM的开发模式,Android手机中的MVVM一直到去年Google的I\O大会上才推出,姗姗来迟.MVVM这中开发模式的优点自不必多说,可以实现视图和逻辑代码的解耦,而且,按照G ...

  5. PHP克隆魔术方法

    克隆对象 __clone() $p2=clone $p; $p=>say(); 克隆对象的时候自动调用的方法 作用和构造方法一样是对新克隆的对象进行初始化 在这个方法中$this是副本所以可以给 ...

  6. Linux环境下搭建Android开发环境

    最近在折腾linux.因为咱是搞安卓开发的,所以少不了需要搭建Android开发环境,就此小记,希望能给向我一样的开发者一点帮助!开干! 1.安装JDK 下载JDK包,得到的是类似于jdk-8u65- ...

  7. Verilog-1995 VS Verilog-2001

    http://www.cnblogs.com/tshell/p/3236476.html 2001年3月IEEE正式批准了Verilog‐2001标准(IEEE1364‐2001),与Verilog‐ ...

  8. java Spring集合

    在进行输入的时候一定要给属性配置set方法,因为不设置是注入不了的. 1.list UserService.java private ArrayList arr; public ArrayList g ...

  9. Apache Avro 与 Thrift 比较

    http://www.tbdata.org/archives/1307 Avro和Thrift都是跨语言,基于二进制的高性能的通讯中间件. 它们都提供了数据序列化的功能和RPC服务. 总体功能上类似, ...

  10. Java Mybatis 传参方式

    一.单个参数: public List<XXBean> getXXBeanList(String xxCode); <select id="getXXXBeanList&q ...