[英]How to fade the background
我本来想看看如何做到这一点,但我真的不知道该怎么称呼它,所以我希望我能在这里描述它,有人可以指出我正确的方向。 无论如何,我正在寻找如何在网站上制作它,当你点击某个东西时,弹出一个新的sorta层并淡化背景。 我看到网站一直这样做,但我不知道该怎么做。 一点指导就会很棒。
它被称为灯箱。 你可以谷歌那个词 。
如果你想避免JavaScript库的重量,这里有一个工作的例子,根据我多次使用的一些自制代码,你可能会发现它很有启发性......
<html>
<head>
<style type="text/css">
#helloWorld {
position:absolute;
margin:2em;padding:2em;
border:1px solid #000;
background-color:#ccd;
opacity:0;
filter:alpha(opacity=0.0); }
</style>
<script type='text/javascript'>
function setOpacity( elem, amount ) {
if ( amount > 1.0 )
amount = 1.0
/*@cc_on
@if (@_jscript)
// This is For Internet Explorer Only
//
elem.style.filter = "alpha(opacity=" + Math.round( amount * 100 ) + ")";
@else*/
// for all other browsers
//
elem.style.opacity = amount;
/*@end
@*/
}
// endOpacity ranges from 0.0 to 1.0
// fade time is in seconds
function fadeIn( elem, endOpacity, fadeTime ) {
var startTime = (new Date()).getTime();
var fadeTimer = null;
var fadeStep = function() {
var elapsedTime = (new Date()).getTime() - startTime;
var opacity = endOpacity * elapsedTime / (fadeTime * 1000.0);
if ( opacity >= endOpacity ) {
opacity = endOpacity
clearInterval( fadeTimer );
}
setOpacity( elem, opacity );
}
fadeTimer = setInterval( fadeStep, 40 ) // with luck = 25 frames per second
}
window.onload = function() {
var elem = document.getElementById( 'helloWorld' );
var clickMe = document.getElementById( 'clickMe' );
clickMe.onclick = function() {
fadeIn( elem, 0.8, 2.0 ); // fade to 80% over 2 seconds
}
}
</script>
</head>
<body>
<div id="helloWorld"><h1>Hello World</h1></div>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p><input id='clickMe' type='button' value='Click me please' /></p>
</body>
</html>
使用shadowbox !!!
下面是一篇关于ppss中opacty的文章: http ://www.quirksmode.org/css/opacity.html
应该帮助你升腹:)
您可以使用Javascript函数解决此问题:
function ShowNewPanel()
{
var new_panel = document.getElementById(’new_panel’);
// w is a width of the new panel
w = 300;
// h is a height of the new panel
h = 300;
// get the x and y coordinates to center the new panel
xc = Math.round((document.body.clientWidth/2)-(w/2))
yc = Math.round((document.body.clientHeight/2)-(h/2))
// show the newsletter panel
new_panel.style.left = xc + “px”;
new_panel.style.top = yc + “px”;
new_panel.style.display = ‘block’;
}
如您所见,我们首先确定将输入面板置于页面中心的坐标。 更新面板的宽度和高度可以更改为适合您需要的任何内容,但请记住,您需要在CSS和此函数中更改这些值。
对于黑屏本身在CSS中使用这样的东西:
filter:alpha(opacity=80);
opacity: 0.8;
更多关于这里 。
您可以将SimpleModal插件用于jQuery。 我在很多项目上成功使用过它。
它使用起来并不难,而且非常灵活。
我很确定你的意思是什么通常被称为模态对话框(这是一个有点误导性的术语)... 这里可以找到一个体面的jquery演示
我认为你还需要使用javascript,才能够。
这是一种使背景淡入淡出的jQuery方法,称为BlockUI: http ://malsup.com/jquery/block/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.