这个简单的类似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实现回到顶部效果

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

  3. turn.js实现翻书效果

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

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

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

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

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

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

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

  7. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  8. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  9. JS实现图片&#39;&#39;推拉门&#39;&#39;效果

    JS实现图片''推拉门''效果   ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通 ...

随机推荐

  1. 伪元素::after和::before

    ::after是一个CSS伪元素,使用::after,你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西).虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示, ...

  2. EntityFramework 7 开发纪录

    博文目录: 暂时开发模式 Code First 具体体现 DbContext 配置 Entity 映射关联配置 Migration 问题纪录(已解决) 之前的一篇博文:EF7 Code First O ...

  3. codeforces 83 D. Numbers

    题意: 给出l,r,k,(1 ≤ l ≤ r ≤ 2·109, 2 ≤ k ≤ 2·109) 求在区间[l,r]内有多少个数i满足 k | i,且[2,k-1]的所有数都不可以被i整除 首先,如果k不 ...

  4. RHEL6 某业务用户ulimit -a命令找不到

    最终确定是shell环境问题,临时改为/bin/bash即可查看. 1.问题现象 # su - jingyu $ id uid=(jingyu) gid=(jingyu) (jingyu) $ uli ...

  5. go语言常用函数:make

    创建数组切片 Go语言提供的内置函数make()可以用于灵活地创建数组切片.创建一个初始元素个数为5的数组切片,元素初始值为0: mySlice1 := make([]int, 5) 创建一个初始元素 ...

  6. Ubuntu 安装Samba服务器

    1.安装 sudo apt-get update sudo apt-get install samba (如果出现库依赖问题可用命令sudo apt-get install samba libwbcl ...

  7. java设计优化--单例模式

    单例模式是一种对象创建模式,确保系统中一个类只有一个实例. 在java语言中,这样做有两大好处: 1.对于频繁使用的对象,可以省略创建对象所话费的时间: 2.由于new操作的次数减少,对于系统内存的使 ...

  8. 【wikioi】2822 爱在心中

    题目链接 算法:Tarjan+dfs(最短路的都行,判连通而已) 先了解一下什么是Tarjan Tarjan算法用于求出图中所有的强连通分量. 转自NOCOW:点击打开链接 ============= ...

  9. js 根据年月获取当月有多少天_js获取农历日期_及Js其它常用有用函数

    //根据年月获取当月有多少天 function getDaysInMonth(year, month) { debugger; //parseInt(number,type)这个函数后面如果不跟第2个 ...

  10. 【风马一族_Java】如何使用ACSLL表的值,

    ------------------------------------------------------------------------------ 一,依次ACSLL表的值 将自然数赋值给c ...