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中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
angular.js实现购物车功能
Oct 23 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 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递归创建和删除文件夹的代码小结
2012/04/13 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
简单实现jQuery弹幕效果
2017/05/06 jQuery
node中的密码安全(加密)
2018/09/17 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python中DJANGO简单测试实例
2015/05/11 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
李宁官方网店:中国运动品牌
2017/11/02 全球购物
《梅花魂》教学反思
2014/04/30 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
年度考核表个人总结
2015/03/06 职场文书
大学团日活动总结书
2015/05/11 职场文书
护理自荐信
2019/05/14 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
52条SQL语句教你性能优化
2021/05/25 MySQL
Java实现简单小画板
2022/06/10 Java/Android