JS弹出层效果

最新推荐文章于 2017-10-13 17:36:00 发布
最新推荐文章于 2017-10-13 17:36:00 发布
阅读量122 收藏
点赞数
文章标签： json xhtml javascript ViewUI

示地址:http://www.corange.cn/demo/3861/index.html

http://www.corange.cn//uploadfiles/20130330212930_10848.jpg


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层效果-www.corange.cn</title>
<style type="text/css">
html, body {height:100%;}
body, h2, p {margin:0px;padding:0px; font-size:12px;}
body {font-size:12px; text-align:center; background:url(bg.jpg) no-repeat center 0;}
.alert_backg {width:100%;height:100%;top:0px;left:0px;position:absolute;background:#000;opacity:0;filter:alpha(opacity:0)}
.alert_frame {width:340px;height:120px;top:50%;left:50%;position:absolute;display:inline;margin:-60px 0 0 -170px;opacity:0;filter:alpha(opacity:0)}
.alert_frame .top_l {width:5px;height:5px;float:left;overflow:hidden;background:url(corner.png) no-repeat;}
.alert_frame .top_c {width:330px;height:5px;float:left;overflow:hidden;background:url(wraplayer.png) repeat-x;}
.alert_frame .top_r {width:5px;height:5px;float:left;overflow:hidden;background:url(corner.png) no-repeat -5px 0;}
.alert_frame .con {width:100%;height:110px;float:left;overflow:hidden;}
.alert_frame .con_l {width:5px;height:100%;float:left;overflow:hidden;background:url(wraplayer.png) repeat-y;}
.alert_frame .con_c {width:330px;height:100%;float:left;overflow:hidden;background:#fff;}
.alert_frame .con_r {width:5px;height:100%;float:left;overflow:hidden;background:url(wraplayer.png) repeat-y;}
.alert_frame .bot_l {width:5px;height:5px;float:left;overflow:hidden;background:url(corner.png) no-repeat 0 -5px;}
.alert_frame .bot_c {width:330px;height:5px;float:left;overflow:hidden;background:url(wraplayer.png) repeat-x;}
.alert_frame .bot_r {width:5px;height:5px;float:left;overflow:hidden;background:url(corner.png) no-repeat -5px -5px;}
.alert_frame .alert_tit {width:328px;height:27px;float:left;color:#000;line-height:27px;border:1px solid #fff;background:url(alert_tit_bg.jpg) repeat-x;}
.alert_frame .alert_tit h2 {float:left;text-indent:10px;font-size:14px;font-weight:bold;font-family:"\u5FAE\u8F6F\u96C5\u9ED1";}
.alert_frame .alert_tit em {width:8px;height:7px;overflow:hidden;float:right;cursor:pointer;background:url(gnbimgs.gif) no-repeat;display:inline;margin:10px 10px 0 0;}
.alert_frame .alert_tit em.hove {background:url(gnbimgs.gif) no-repeat -8px 0;}
.alert_frame .alert_con {width:330px;height:81px;float:left;border-top:1px solid #e5e5e5;}
.size {width:100%;height:45px;text-align:center;line-height:45px;color:#000;}
.but {width:100%;height:22px;text-align:center;line-height:22px;}
.button {width:55px;height:22px;text-align:center;line-height:22px;color:#fff;background:url(but.jpg) no-repeat;border:none;display:inline;margin:0 8px;cursor:pointer;}
.title {width:800px;height:35px;color:#fff;line-height:35px;font-family:Verdana;font-weight:bold;text-align:left;margin:20px auto 0 auto;font-size:24px;}
.table {width:800px;height:auto;overflow:hidden;margin:0 auto 20px auto;font-size:12px;border-top:1px solid #ddd;border-left:1px solid #ddd;background:#fff;}
.table ul {margin:0px;padding:0px;float:left;list-style-type:none;}
.table li {width:159px;height:30px;float:left;color:#3e3e3e;text-indent:10px;text-align:left;line-height:30px;font-family:Verdana,"微软雅黑"; border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
.table li.td {color:#fff;font-size:14px;font-family:"微软雅黑";font-weight:bold;background:#424242;}
.table li.tit {width:479px;}
.table .tr {width:800px;height:30px;float:left;text-indent:10px;text-align:left;line-height:30px;font-size:14px;font-family:Verdana;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
.table .tr a {color:#ff6600;text-decoration:none;}
.table .tr a:hover {text-decoration:underline;}
</style>
<script type="text/javascript">
function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}
function $$(oParent, elem){
return (oParent || document).getElementsByTagName(elem);
}
function $$$(oParent, sClass){
var aElem = $$(oParent, '*');
var aClass = [];
var i = 0;
for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
return aClass;
}
function Alert(){
this.initialize.apply(this, arguments);
}
Object.extend = function(destination, source){
for (var property in source) {
destination[property] = source[property];
}
return destination;
};
Alert.prototype = {
initialize : function(obj, frame, onEnd){
if($(obj)){
var _this = this;
this.obj = $(obj);
this.frame = frame;
this.oEve(onEnd);
this.oTitle = this.onEnd.title;
this.oContent = this.onEnd.content;
this.iWidth = this.onEnd.width;
this.iHeight = this.onEnd.height;
this.iTop = this.onEnd.top;
this.iLeft = this.onEnd.left;
this.iFixed = this.onEnd.fixed;
this.iClose = this.onEnd.close;
this.obj.onclick = function(){_this.create(),_this.backg();};
window.onresize = function(){_this.backg();};
}
},
create : function(){
this.oDiv = document.createElement('div');
this.oAlert_backg = document.createElement('div');
this.oAlert_frame = document.createElement('div');
this.oTop_l = document.createElement('div');
this.oTop_c = document.createElement('div');
this.oTop_r = document.createElement('div');
this.oCon = document.createElement('div');
this.oCon_l = document.createElement('div');
this.oCon_c = document.createElement('div');
this.oCon_r = document.createElement('div');
this.oBot_l = document.createElement('div');
this.oBot_c = document.createElement('div');
this.oBot_r = document.createElement('div');
this.oDiv.id = this.frame;
this.oAlert_backg.className = 'alert_backg';
this.oAlert_frame.className = 'alert_frame';
this.oTop_l.className = 'top_l';
this.oTop_c.className = 'top_c';
this.oTop_r.className = 'top_r';
this.oCon.className = 'con';
this.oCon_l.className = 'con_l';
this.oCon_c.className = 'con_c';
this.oCon_r.className = 'con_r';
this.oBot_l.className = 'bot_l';
this.oBot_c.className = 'bot_c';
this.oBot_r.className = 'bot_r';
document.body.appendChild(this.oDiv);
this.box = $(this.frame);
this.box.appendChild(this.oAlert_backg);
this.box.appendChild(this.oAlert_frame);
this.oFra = $$$(this.box, 'alert_frame')[0];
this.oFra.appendChild(this.oTop_l);
this.oFra.appendChild(this.oTop_c);
this.oFra.appendChild(this.oTop_r);
this.oFra.appendChild(this.oCon);
this.oFra.appendChild(this.oBot_l);
this.oFra.appendChild(this.oBot_c);
this.oFra.appendChild(this.oBot_r);
this.oCone = $$$(this.box, 'con')[0];
this.oCone.appendChild(this.oCon_l);
this.oCone.appendChild(this.oCon_c);
this.oCone.appendChild(this.oCon_r);
this.tit = $(this.frame);
this.con = $$$(this.tit, 'con_c')[0];
this.oAlert_tit = document.createElement('div');
this.oAlert_con = document.createElement('div');
this.oH2 = document.createElement('h2');
this.oAlert_tit.className = 'alert_tit';
this.oAlert_con.className = 'alert_con';
if(this.oTitle != ""){
this.con.appendChild(this.oAlert_tit);
this.con.appendChild(this.oAlert_con);
this.oAlert_tit = $$$(this.tit, 'alert_tit')[0];
this.oH2.innerHTML = this.oTitle;
this.oAlert_tit.appendChild(this.oH2);
}
this.content();
this.width();
this.height();
this.top();
this.left();
this.fixed();
this.close();
this.Top = this.oFra.offsetTop;
this.oFra.style.top = (this.Top - 40) +'px';
this.oFra.style.marginTop = 0;
this.sMove(this.oFra, {top:this.Top, opacity:100});
this.sMove(this.oBackg, {opacity:50});
},
oEve: function(onEnd){
this.onEnd = {};
Object.extend(this.onEnd, onEnd || {});
},
content : function(){
this.conent = $$$(this.tit, 'alert_con')[0];
this.conent == undefined ? this.con.innerHTML = this.oContent : this.conent.innerHTML = this.oContent;
this.oButton = $$(this.tit, 'button');
var i = 0;
var _this = this;
for(i=0;i<this.oButton.length;i++)this.oButton[i].onclick = function(){_this.em.onclick()};
},
width : function(){
this.oBackg = $$$(this.tit, 'alert_backg')[0];
this.oFrame = $$$(this.tit, 'alert_frame')[0];
this.oCon = $$$(this.oFrame, 'con')[0];
this.oTop_c = $$$(this.oFrame, 'top_c')[0];
this.oCon_c = $$$(this.oFrame, 'con_c')[0];
this.oBot_c = $$$(this.oFrame, 'bot_c')[0];
this.oAlert_tit = $$$(this.oFrame, 'alert_tit')[0];
this.oAlert_con = $$$(this.oFrame, 'alert_con')[0];
if(this.iWidth != ""){
this.oFrame.style.width = parseInt(this.iWidth) +'px';
this.oFrame.style.marginLeft = -parseInt(this.iWidth) / 2 +'px';
this.oTop_c.style.width = parseInt(this.iWidth) - 10 +'px';
this.oCon_c.style.width = parseInt(this.iWidth) - 10 +'px';
this.oBot_c.style.width = parseInt(this.iWidth) - 10 +'px';
this.oAlert_tit.style.width = parseInt(this.iWidth) - 12 +'px';
this.oAlert_con.style.width = parseInt(this.iWidth) - 10 +'px';
}
},
height : function(){
if(this.iHeight != ""){
this.oFrame.style.height = parseInt(this.iHeight) +'px';
this.oFrame.style.marginTop = -parseInt(this.iHeight) / 2 +'px';
this.oCon.style.height = parseInt(this.iHeight) - 10 +'px';
this.oAlert_con.style.height = parseInt(this.iHeight) - 40 +'px';
}
},
top : function(){
if(this.iTop != "")this.oFrame.style.top = parseInt(this.iTop) +'px',this.oFrame.style.marginTop = 0;
},
left : function(){
if(this.iLeft != "")this.oFrame.style.left = parseInt(this.iLeft) +'px',this.oFrame.style.marginLeft = 0;
},
backg : function(){
this.oScrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
this.oScrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth;
this.oBackg.style.width = document.documentElement.clientWidth + (this.oScrollWidth - document.documentElement.clientWidth) +'px'
this.oBackg.style.height = document.documentElement.clientHeight + (this.oScrollHeight - document.documentElement.clientHeight) +'px'
},
fixed : function(){
if(this.iFixed == "fixed"){
var _this = this;
this.oFrame.style.position = 'fixed';
this.oAlert_tit.style.cursor = 'move';
this.oAlert_tit.onmousedown = function(e){
var _thisE = this;
this.oEvent = e || event;
this.X = this.oEvent.clientX - _this.oFrame.offsetLeft;
this.Y = this.oEvent.clientY - _this.oFrame.offsetTop;
document.onmousemove = function(e){
this.oEvent = e || event;
this.L = this.oEvent.clientX - _thisE.X;
this.T = this.oEvent.clientY - _thisE.Y;
if(this.L < 0){
this.L = 0;
}else if(this.L > document.documentElement.clientWidth - _this.oFrame.offsetWidth){
this.L = document.documentElement.clientWidth - _this.oFrame.offsetWidth
}
if(this.T < 0){
this.T = 0;
}else if(this.T > document.documentElement.clientHeight - _this.oFrame.offsetHeight){
this.T = document.documentElement.clientHeight - _this.oFrame.offsetHeight;
}
_this.oFrame.style.left = this.L + 'px';
_this.oFrame.style.top = this.T + 'px';
_this.oFrame.style.margin = 0;
return false;
}
document.onmouseup = function(){
document.onmouseup = null;
document.onmousemove = null;
};
return false;

};
if(this.oFrame){
if(!-[1,] && !window.XMLHttpRequest){
document.documentElement.style.textOverflow = "ellipsis";
this.oFrame.style.position = "absolute";
this.oFrame.style.setExpression("top", "eval(documentElement.scrollTop + " + this.oFrame.offsetTop + ') + "px"');
}
}
}
},
close : function(){
if(this.iClose == "close" && this.oTitle != ""){
var _this = this;
this.clos = $$$(this.tit, 'alert_tit')[0];
var oEm = document.createElement('em');
this.clos.appendChild(oEm);
this.em = $$(this.tit, 'em')[0];
this.em.onmouseover = function(){_this.em.className = 'hove';};
this.em.onmouseout = function(){_this.em.className = '';};
this.em.onclick = function(){
_this.sMove(_this.oFra, {top:(_this.Top - 40), opacity:0},function(){
document.body.removeChild(_this.em.parentNode.parentNode.parentNode.parentNode.parentNode);
});
_this.sMove(_this.oBackg, {opacity:0});
}
}
},
getStyle : function(obj, attr)
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];
},
sMove : function(obj, json, onEnd){
var _this = this;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
_this.dMove(obj, json, onEnd);
},30);
},
dMove : function(obj, json, onEnd){
this.attr = '';
this.bStop = true;

for(this.attr in json){
this.iCur = 0; 
this.attr == 'opacity' ? this.iCur = parseInt(parseFloat(this.getStyle(obj, this.attr))*100) : this.iCur = parseInt(this.getStyle(obj, this.attr));
this.iSpeed = (json[this.attr] - this.iCur) / 7;
this.iSpeed = this.iSpeed > 0 ? Math.ceil(this.iSpeed) : Math.floor(this.iSpeed); 
if(json[this.attr] != this.iCur)this.bStop = false;
if(this.attr == 'opacity'){
obj.style.filter = 'alpha(opacity:' + (this.iCur + this.iSpeed) +')';
obj.style.opacity = (this.iCur + this.iSpeed ) / 100;
}else{
obj.style[this.attr] = this.iCur + this.iSpeed + 'px';
}
}
if(this.bStop){
clearInterval(obj.timer); 
if(onEnd)onEnd();
}
}
};
window.onload = function(){
new Alert('but', 'box', {
title : '提示内容',
content : '<div class="size">确定关闭</div><div class="but"><button class="button">确定</button><button class="button">取消</button></div>',
width : '',
height : '',
top : '',
left : '',
fixed : '',
close : 'close'
});
};
</script>
</head>
<body style="height:950px;">
<div class="title">API</div>
<div class="table">
<ul>
<li class="td">属性</li>
<li class="td">默认值</li>
<li class="tit td">说明</li>
<li>ButId</li>
<li>but</li>
<li class="tit">点击按钮Id（必选）</li>
<li>ElementId</li>
<li>box</li>
<li class="tit">弹出层Id（必选）</li>
<li>title</li>
<li>提示信息</li>
<li class="tit">提示层标题（可选）</li>
<li>content</li>
<li>自行编辑</li>
<li class="tit">提示层内容（可选）</li>
<li>width</li>
<li>340px</li>
<li class="tit">提示层宽度（可选）</li>
<li>height</li>
<li>120px</li>
<li class="tit">提示层高度（可选）</li>
<li>top</li>
<li>绝对居中</li>
<li class="tit">提示层上间距（可选）</li>
<li>left</li>
<li>绝对居中</li>
<li class="tit">提示层上间距（可选）</li>
<li>fixed</li>
<li>相对定位</li>
<li class="tit">跟谁滚动条绝对定位/是否拖拽（fixed:'fixed'）（可选）</li>
<li>close</li>
<li>close</li>
<li class="tit">是否显示关闭按钮（close:'close'）（可选）</li>
</ul>
<div class="tr">www.corange.cn<a href="javascript:;" id="but">提示你点击这里</a>查看演示</div>
</div>
</body>
</html> 


原文地址:http://www.corange.cn/archives/2013/03/3861.html

iteye_1931
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单精美js弹出层效果
07-16
js弹出层效果，简单精美js弹出层效果—菜鸟的福音
js 弹出层效果
linbai10864的博客
11-30 114
&lt;script type="text/javascript"&gt; var docEle = function() { return document.getElementById(arguments[0]) || false; } function openNewDiv(_id) { var m = "mask"; if (docEle(_...
js弹出层效果
ZuxiangHuang的专栏
06-09 2498
jsvar TINY={};function T$(i){return document.getElementById(i)}TINY.box=function(){ var p,m,b,fn,ic,iu,iw,ih,ia,f=0; return{ show:function(c,u,w,h,a,t){ if(!f){ p=document.cr
JavaScript弹出层效果
liona_koukou的博客
09-02 226
效果图：（简单实现功能） 代码：   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;弹出层效果&lt;/title&gt; &lt;style&gt; a
使用JavaScript实现弹出层效果的简单实例
10-22
下面小编就为大家带来一篇使用JavaScript实现弹出层效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript制作弹出层效果
10-20
弹出层效果大家在网站上经常遇到此功能，下面小编给大家分享一段js代码制作弹出层效果，代码简单易懂，非常不错，需要的朋友参考下吧
javascript实现弹出层效果
10-15
主要为大家详细介绍了javascript实现弹出层效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实用的动画弹出层效果实例
10-24
主要介绍了JS实用的动画弹出层效果,实例分析了javascript实现动画效果弹出层的方法,非常具有实用价值,需要的朋友可以参考下
js弹出框 javascript弹出框 div+css弹出层效果 弹出登录框
06-10
可选属性: 1.autoSize="true" 让div自适应大小 可选值true false 默认false 2.width height弹出框的长宽 默认500 300 3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093DB 5.title 弹出框名称 6.弹出框url 7.弹出框是否可拖动 true or false 兼容各种主流浏览器,绝对精美,配置属性后,直接调用js方法即可使用,相当方便.
JS实现弹出层效果
weixin_30569033的博客
04-13 118
很多时候我们想去某某网站干点什么的时候，就会让我们先注册登录后才可以访问内容，而现在很多网站注册登录的时候都会有一种遮罩层的效果，就是背景是带有透明度的黑色遮罩，盖满整个网站，然后登录框弹出固定在屏幕的居中位置。那么，今天就练练这个实用而简单的效果吧。PS：这个是我学习后练习的demo！ 首先，需要有一个按钮来模拟登录： <button id="btnLogin"class="log...
js 实现弹出层效果
weixin_30847939的博客
10-13 325
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js实现弹出层效果</title> <style> #mask { background: black; opacity:0....
Javascript弹出层的效果
jiangfeng08的专栏
11-02 1027
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/1999/xhtml">-body {margin:0px} #Loading {   position:absolute;
弹出层 效果-弹出窗-纯js
weixin_34080571的博客
04-08 151
2019独角兽企业重金招聘Python工程师标准>>> ...
js弹出层，效果代码
mrx1005的专栏
04-25 1009
-<!--body {margin:0px}#Loading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background:#eeeeee;width:10px;height:10px}-->body {margin:0px}#Loading {position:
一个实用的JS动画弹出层效果
智慧是做事用的,对于灵魂来说,靠的是信仰
05-22 2599
动画弹出层 .list{ position:relative;; background:#eee; border:1px #ccc solid; margin:10px; height:30px; width:100px; cursor :pointer ; } .listShow{ position:relative; background:#eff; border
javascript弹出层
啊哈前端的专栏
01-08 1014
javascript简单的弹出层 window.onload=function(){ function setCss(_this,cssOption){ //设置元素样式 //判断节点类型 if(!_this||_this.nodeType===3||_this.nodeType
另外一个不错的弹出层的js效果
学无止境的专栏
11-28 902
 
点击div实现弹出层效果
最新发布
06-10
可以通过CSS和JavaScript实现点击div弹出层的效果，具体步骤如下： HTML部分： ```html <div id="myDiv">Click me! <p>Hello, world! <button id="close-btn">Close ``` CSS部分： ```css .overlay { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值