ugrás a tartalomhoz

'popup' div fade-in background-dal

mahoo · 2009. Már. 8. (V), 18.45
Hello, segitseget szeretnek a kovetkezo koddal kapcsolatban. Hozzateszem teljesen jol mukodik addig, amig a js kod nem a head-ben vagy kulso .js fajlban van. Ezt kellene megoldani, de ez en js tudasom ehez sajnos keves :(.

tehat a kod: http://www.nusuni.com/blog/2007/07/20/javascript-floating-div-window-with-background-fade-option/

vagy...

<HTML>
<BODY style="margin:0px; padding:0px;">

<html>
<head>
<title>Javascript Transparent Floating Window</title>
</head>
<body>
<div id="thewindow" style="display: none;width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;">
<div id="thewindowbackground" style="width: 100%;height: 100%;background-color: #000000;position: absolute;opacity: .5;filter: alpha(opacity=50);">
</div>
<div id="thewindowcontent" style="background-color: #000000;position: absolute;left: 50%;top: 50%;width: 250px; height: 250px; margin-left: -125px;margin-top: -125px;">
<form><input type="button" value="Close" onClick="hideWindow();"></form>
<div style="color: #ffffff;">
Hello!
</div>
</div>
</div>

<form><input type="button" value="Show Window" onClick="showWindow();"></form>

<script language="javascript" type="text/javascript">
end_opacity = 50; //end opacity, 25 = 25%, 50 = 50%, 100 = 100%, etc.
increase_opacity_by = 10; //how much to increase by each time the timeout ends
timeout = 100; //timeout in miliseconds, 0 = instant fade-out

win = document.getElementById('thewindow');
winbackground = document.getElementById('thewindowbackground');
wincontent = document.getElementById('thewindowcontent');
cur_opacity = 0;

var timer = null;

function showWindow() {
if(timeout > 0) {
cur_opacity = 0;

winbackground.style.opacity = cur_opacity / 100;
winbackground.style.filter = "alpha(opacity=" + cur_opacity + ")";
win.style.display = 'block';
wincontent.style.display = 'none';

timer = setTimeout("increase_opacity()",timeout);
}
else {
winbackground.style.opacity = end_opacity / 100;
winbackground.style.filter = "alpha(opacity=" + end_opacity + ")";
win.style.display = 'block';
wincontent.style.display = 'block';
}
}

function increase_opacity() {
cur_opacity += increase_opacity_by;

winbackground.style.opacity = cur_opacity / 100;
winbackground.style.filter = "alpha(opacity=" + cur_opacity + ")";

if(cur_opacity < end_opacity) {
timer = setTimeout("increase_opacity()",timeout);
}
else {
wincontent.style.display = 'block';
}
}

function hideWindow() {
win.style.display = 'none';
}
</script>

</body>
</html>


Az is nagy segitseg lenne, ha kapnek egy linket ahhol a kovetkezok mukodnek:
- fade in(/out) background
- kulso .js fajl
- css-bol formazhato megjelenes (background, popup div)

Elore is koszi!
‹ js: select tag-re feltétel Checkbox állapotának lekérdezése ›
 ■
1

Null

gabesz666 · 2009. Már. 9. (H), 09.48
A probléma abból adódik, hogy a winbackground nevű változó értéke null, mivel a a változó létrehozásakor még nem jött létre az az elem, amelyre hivatkozna.

Megoldás: a var timer = null részig cseréld le erre a kódot:

var end_opacity;
var increase_opacity_by;
var timeout;
var win;
var winbackground;
var wincontent;
var cur_opacity;

function load() {
end_opacity = 50; //end opacity, 25 = 25%, 50 = 50%, 100 = 100%, etc.
increase_opacity_by = 10; //how much to increase by each time the timeout ends
timeout = 100; //timeout in miliseconds, 0 = instant fade-out

win = document.getElementById('thewindow');
winbackground = document.getElementById('thewindowbackground');
wincontent = document.getElementById('thewindowcontent');
cur_opacity = 0;
}
Majd a body tag-nek adj még egy olyan attribútumot, hogy onLoad="load()"
2

koszonom!!!! most mar okes!

mahoo · 2009. Már. 10. (K), 18.23
koszonom!!!! most mar okes! :)))

ha mar itt vagyok: azt szeretnem, hogy tudni, hogy egy onlclick esemennyel megoldhato e az, hogy egy input tag-et aktiva, vagyis "beletegyem" a villogo kurzort. lehetseges?
3

focus

Poetro · 2009. Már. 10. (K), 20.19
domElement.focus();