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 相关文章推荐
extjs 04_grid 单击事件新发现
Nov 27 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 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
如何开始收听短波广播
2021/03/01 无线电
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
php 基础函数
2017/02/10 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
js实现简单计算器
2015/11/22 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
vue中监听路由参数的变化及方法
2019/12/06 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
计算机网络专业求职信
2014/06/05 职场文书
建筑工地大门标语
2014/06/18 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
报效祖国演讲稿
2014/09/15 职场文书
单位作风建设自查报告
2014/10/23 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
Python序列化模块JSON与Pickle
2022/06/05 Python