js实现仿网易点击弹出提示同时背景变暗效果


Posted in Javascript onAugust 13, 2015

本文实例讲述了js实现仿网易点击弹出提示同时背景变暗效果。分享给大家供大家参考。具体如下:

这里仿网易点击弹出提示,背景变暗提示层效果,圆角,美观简洁,代码稍嫌多。

运行效果如下图所示:

js实现仿网易点击弹出提示同时背景变暗效果

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>点击弹出提示,背景变暗</title>
<script>
function msg(info){
var p=document.createElement("DIV");
if (!info) var info='<a href="#" target="_blank" rel="external">欢迎光临</a>';
p.id="p";
p.style.position="absolute";
p.style.width=document.body.scrollWidth;
p.style.height=(document.body.offsetHeight>document.body.scrollHeight)?'100%':document.body.scrollHeight;
p.style.zIndex='998';
p.style.top='0px';
 p.style.left='0%';
p.style.backgroundColor="gray";
p.style.opacity='0.5';
p.style.filter="alpha(opacity=80)";
document.body.appendChild(p);
var p1=document.createElement("DIV");
var top=parseInt(parseInt(document.body.scrollHeight)*0.25)+document.body.scrollTop;
p1.style.position="absolute";
p1.style.width="300px";
p1.id="p1";
var left=Math.ceil(((document.body.scrollWidth)-parseInt(p1.style.width.replace('px','')))/2)+document.body.scrollLeft;
p1.style.height="200px";
p1.style.zIndex='999';
p1.style.top=top+'px';
 p1.style.left=left+'px';
p1.style.border="0px solid red";
var html="";
 html+="<center>"
 html+="<div class='p3' style='height:1px;overflow:hidden;background:red;width:294px;border-left:1px solid red;border-right:1px solid red;'></div>"
 html+="<div class='p2' style='height:1px;overflow:hidden;background:red;width:296px;border-left:1px solid red;border-right:1px solid red;'></div>"
 html+="<div class='p2' style='height:1px;overflow:hidden;background:red;width:298px;border-left:1px solid red;border-right:1px solid red;'></div>"
 html+="<div class='p1' style='height:20px;overflow:hidden;background:red;width:300px;border-left:1px solid red;border-right:1px solid red;color:#fff;font-size:9pt;font-weight:bold;text-align:left;'> ⊙ 友情提示:</div>"
html+="<div id='c' style='height:150px;width:300px;background-color:#FEEACB;overflow:hidden;border-left:1px solid red;border-right:1px solid red;padding-top:40px;font-size:9pt;'>"+info+"<br><br><br>[ <a href='javascript:this.cancle()'> 关闭</a> ]</div>"
 html+="<div class='p1' style='height:1px;overflow:hidden;background:#FEEACB;width:298px;border-left:1px solid red;border-right:1px solid red;'></div>"
 html+="<div class='p2' style='height:1px;overflow:hidden;background:#FEEACB;width:296px;border-left:1px solid red;border-right:1px solid red;'></div>"
 html+="<div class='p3' style='height:1px;overflow:hidden;background:red;width:294px;border-left:1px solid red;border-right:1px solid red'></div>"
 html+="</center>"
document.body.appendChild(p1);
p1.innerHTML=html;
var arr=document.getElementsByTagName("select");
var i=0;
while(i<arr.length){
 arr[i].style.visibility='hidden';
 i++;
}
this.cancle=function(){
document.body.removeChild(document.getElementById('p'));
document.body.removeChild(document.getElementById('p1'));
var arr=document.getElementsByTagName("select");
 var i=0;
 while(i<arr.length){
 arr[i].style.visibility='visible';
 i++;
 }
}
}
</script>
</head>
<body>
<input value='点击弹出提示' type='button' onClick='msg()' />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
node网页分段渲染详解
Sep 05 Javascript
如何提高Dom访问速度
Jan 05 Javascript
javascript history对象详解
Feb 09 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 #Javascript
对于jQuery性能的一些优化建议
Aug 13 #Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 #Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 #Javascript
理解和运用JavaScript的闭包机制
Aug 13 #Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 #Javascript
JavaScript的面向对象编程基础
Aug 13 #Javascript
You might like
PHP新手上路(二)
2006/10/09 PHP
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
Javascript !!的作用
2008/12/04 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
js数组操作常用方法
2014/05/08 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
python 判断一个进程是否存在
2009/04/09 Python
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
基于python生成器封装的协程类
2019/03/20 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
python列表推导式操作解析
2019/11/26 Python
Python中的Cookie模块如何使用
2020/06/04 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
幼师个人总结范文
2015/02/28 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
酒店开业主持词
2015/07/02 职场文书