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 相关文章推荐
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
js实现开关灯效果
Mar 30 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
Python+Wordpress制作小说站
2017/04/14 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
tensorflow 实现数据类型转换
2020/02/17 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
Python生成器generator原理及用法解析
2020/07/20 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
python音频处理的示例详解
2020/12/23 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
全国税务系统先进集体事迹材料
2014/05/19 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
年终工作总结范文2014
2014/11/27 职场文书
五年级学生期末评语
2014/12/26 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
团委工作总结2015
2015/04/02 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书