这个简单的类似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. 【转】如何优化Cocos2d-X游戏的内存

    Published on 2013 年 2 月 4 日, by donglin http://blog.chukong-inc.com/index.php/2013/02/04/%E5%A6%82%E ...

  2. Android（java）学习笔记139：在TextView组件中利用Html插入文字或图片

    首先我们看看代码: 1.activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/r ...

  3. Linux基础命令（三）

    一.常用命令—文件目录类命令 1.ls 列出指定或默认目录的文件信息 使用形式: ls [选项] [目录名] 实例: $ls $ls –als $ls /home/sq/Desktop $ls ./D ...

  4. Clean Code(三)：注释

    在工作中经常在刚开始写代码的时候,写下类与方法的注释,时间久了,CR多了,也不可能一直去修改注释了.加班都累成dog.注释才不改呢,就是这么任性,哈哈. 项目久了,注释会欺骗阅读者,本人被骗过,也骗过 ...

  5. 发布GeoServer后预览提示下载wms文件

    这是因为发布的图层有中文所导致的,只需修改tomcat的server.xml文件 <Connector port="8080" protocol="HTTP/1.1 ...

  6. javascript-01

    1.JavaScript:浏览器脚本语言 2.JavaScript的作用  |-1.进行前端验证  |-2.实现页面的动态效果 3.JavaScript的特点  |-1.和java没有任何关系,官方标 ...

  7. i++与++i的区别

    i++与++i的意思都是i自身加1,不过这个两个语句却有很大的区别. ++i,就是直接在i上再加1,这个无需多解释. i++会稍微特殊些,他会在下次执行语句,再遇到i时,才会在i身上加1. 打个比方, ...

  8. FromHandle函数

    一 FromHandle() MFC 实际上是对内核对象HANDLE(如CDC的m_hDC,CWnd的m_hWnd)封装了这个句柄有关的所有操作,一个类生成一个新对象的时候这个句柄是无效的,要获得这个 ...

  9. 08_一个java.lang.NullPointException报错

    [报错代码] public class UserDaoTest{ private SqlSessionFactory sqlSessionFactory; //此方法在执行testFindUserBy ...

  10. HDU 4712 Hamming Distance（随机算法）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4712 题目大意:任意两个数按位异或后二进制中含1的个数被称为海明距离,给定n个数,求出任意其中两个最小 ...