I found some code on the net to do the "popup" form in CSS using a div and the CSS opacity property. It works great in IE and Chrome, but not FireFox. In FireFox, nothing happens. I've seen some issues with FireFox CSS on the boards, but nothing specific to what I'm looking at. Any help on this issue would be great as I'm pretty new to CSS. Thanks!
[Here][1] is the site where I got the code for reference.
CSS
#blanket
{
background-color: #111;
opacity: 0.65;
filter: alpha(opacity=65);
position: absolute;
z-index: 9001;
top: 0px;
left: 0px;
width: 100%;
}
#popUpDiv
{
position: absolute;
background-color: #eeeeee;
width: 300px;
height: 300px;
z-index: 9002;
}
HTML:
<td align="left">
<div id="blanket" style="display: none;">
</div>
<div id="popUpDiv" style="display: none;">
<table>
<tr>
<td>
<a href="#" onclick="popup('popUpDiv')">Close</a>
</td>
</tr>
<tr>
<td style="color: Black;">
Please describe the issue:
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtIssue" runat="server" TextMode="MultiLine" Width="275" Height="200"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="cmdSend" runat="server" Text="Send" />
</td>
</tr>
</table>
</div>
<a href="#" onclick="popup('popUpDiv')">Click here to report an issue.</a>
<br />
<asp:Label ID="lblIssueStatus" runat="server" Text="" Style="color: Red;"></asp:Label>
</td>
JS:
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-150;//150 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.par开发者_如何转开发entNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-150;//150 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
Looks like my script type tag was jscript, my dumb mistake. Thanks for the help everyone!
精彩评论