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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
js实现表格字段排序
Feb 19 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
Angular2数据绑定详解
Apr 18 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
php学习笔记 数组的常用函数
2011/06/13 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
php简单图像创建入门实例
2015/06/10 PHP
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
使用Python进行目录的对比方法
2018/11/01 Python
python如何删除文件中重复的字段
2019/07/16 Python
python中判断文件结束符的具体方法
2020/08/04 Python
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
AJAX的全称是什么
2012/11/06 面试题
Java的类与C++的类有什么不同
2014/01/18 面试题
英语自荐信范文
2013/12/11 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
大学新生军训感言
2014/02/25 职场文书
倡议书格式范文
2014/04/14 职场文书
公司运动会策划方案
2014/05/25 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
销售开票员岗位职责
2015/04/15 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫