Button form is unclickable, once placed in a div
I've got a button, which onClick should refer to a JavaScript function, but when I place this button inside a div, it's becomes unclickable. I'm using Firefox, could that be the problem?
Here's my CSS code:
#fullscreen {
background-color: #222222;
font-color: #FFFFFF;
display: block;
position:absolute;
left: 0px;
right: 0px;
width:100%;
height:100%;
border-style: none;
border-width: 0px;
border-color: #FFFFFF;
z-index: -2;
}
and the HTML/JS code:
<script type="text/javascript">
function adjust() {
var bg_img = document.getElementById('bg_img_img');
var percent = bg_img.height/(screen.height/2);
bg_img.width = bg_img.width/percent;
bg_img.height = screen.height/2;
var bg_img_div = document.getElementById('bg_img_div');
bg_img_div.left = -(bg_img.width/2);
document.write(bg_img_div.left);
}
<script type="text/javascript">
function fade_top() {
var top_bg = getElementById('fullscreen');
top_bg.background-color = "#FFFFFF";
}
</script>
</head>
<body >开发者_开发技巧
<div id="fullscreen">
<form>
<input type="button" value="Hello world!" onclick="fade_top();">
</form>
</div>
</body>
Thanks in advance!
Sammy
<script type="text/javascript">
function adjust() {
var bg_img = document.getElementById("bg_img_img");
var percent = bg_img.height / (screen.height/2);
bg_img.width = bg_img.width / percent;
bg_img.height = screen.height / 2;
var bg_img_div = document.getElementById("bg_img_div");
bg_img_div.left = -(bg_img.width/2);
document.write(bg_img_div.left);
}
function fade_top() {
var top_bg = document.getElementById("fullscreen");
top_bg.style.backgroundColor = "#FFFFFF";
}
</script>
the fade_top() function can't be called/run if its invalid :) try the above!
The z-index: -2 probably puts the div "behind" the body as far as clicking is concerned.
Try using a positive z-index, that should fix it.
加载中,请稍侯......
精彩评论