Lightbox类

最新推荐文章于 2025-04-27 14:29:13 发布

原创最新推荐文章于 2025-04-27 14:29:13 发布 · 1k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#function #div #class #filter #css #html

程序专栏收录该内容

11 篇文章

订阅专栏

Lightbox类

<html>

<head>

<style type="text/css">

/* lightbox CSS */

#lightbox {/*该层为高亮显示层*/

display: none;

width:352px;

height:150px;

position:absolute;

font-size:14px;

font-family:"Tahoma",Verdana,Arial,宋体;

z-index:9990;

top: 190px;

left: 33%;

}

.main{ z-index:9999;position:absolute; top:0px; left:0px;}

#lb_inner{ width:350px; height:148px; background:#fff url(images/loading.gif) 15px 30px no-repeat; border:1px solid #ccc;

border-right:1px solid #666; border-bottom:1px solid #666;}

#lb_con{ padding:20px 20px; position:absolute; left:50px;}

.btn{ text-align:center;position:absolute;top:100px;width:100%;}

.shadow{ z-index:9998;position:absolute; top:4px; left:4px; width:352px; height:150px;

background:#666;opacity:0.2;filter:alpha(opacity=20);}

#overlay {/*该层为覆盖层*/

display: none;

position: absolute;

top: 0;

z-index: 9000;

background-color: #fff;

filter:alpha(opacity=40);

-moz-opacity: 0.4;

opacity: 0.4;

}

</style>

<script type="text/javascript">

var Class = {

create: function() {

return function() {

this.initialize.apply(this, arguments);

}

}

}

Object.extend = function(destination, source) {

for (var property in source) {

destination[property] = source[property];

}

return destination;

}

//简化document.getElementById(element).style

function $C(element){

return document.getElementById(element).style;

}

var Lightbox = Class.create();

Lightbox.prototype = {

initialize: function(options) {

//可以考虑在这里创建Lightbox的div结构，未知方法

this.SetBox(options);

},

//设置默认属性

SetOptions: function(options) {

this.options = {//默认值

overlay: true,//覆盖层

bgImage: 'images/ending.gif',//背景图

content: '请点击"取消操作"返回',//内容

btn_value: '取消操作',//按钮内容

btn_onclick: this.Close//按钮操作

}

Object.extend(this.options, options || {});

},

//设置Lightbox

SetBox: function(options) {

this.SetOptions(options);

$C("lb_inner").backgroundImage = 'url('+this.options.bgImage+')'

document.getElementById("lb_con").innerHTML = this.options.content;

var btn = document.getElementById("lb_btn");

btn.value = " "+this.options.btn_value+" ";

btn.onclick = this.options.btn_onclick;

},

//显示Lightbox

Show: function(options) {

this.SetBox(options);

if(this.options.overlay){ this.ShowOverlay(); } else { this.CloseOverlay(); };

$C("lightbox").display="block";

SetSelects('hidden');

},

//关闭（隐藏）Lightbox

Close: function() {

$C("overlay").display="none";

$C("lightbox").display="none";

SetSelects('visible');

},

//显示设置覆盖层

ShowOverlay: function() {

with ($C("overlay")) {

display="block";

width = 776+'px';//这里应根据实际情况确定

height = document.body.scrollHeight+'px';

}

},

//关闭覆盖层

CloseOverlay: function() {

$C("overlay").display="none";

}

};

//设置所有select的css属性，由于select不能覆盖,所以在显示Lightbox时要隐藏掉

function SetSelects(css) {

selects = document.getElementsByTagName("select");

var len = selects.length;

for (i = 0; i != len; i++)

selects[i].style.visibility = css;

}

</script>

</head>

<body>

<div id="overlay"></div>

<div id="lightbox">

<div class="main">

<div id="lb_inner">

<div id="lb_con"> </div>

<div class="btn">

<input id="lb_btn" type="button"/>

</div>

</div>

</div>

<div class="shadow"></div>

</div>

<script type="text/javascript">

//先创建和初始化一个Lightbox实例

var box = new Lightbox();

//然后就可以对这个Lightbox进行操作了

box.Show({

bgImage: 'images/loading.gif',

content: '内容显示',

btn_value: '按钮'

});

</script>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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