开发者

CSS for "Popup" not working in FireFox

开发者 https://www.devze.com 2023-02-10 03:46 出处:网络
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 issue

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!

0

精彩评论

暂无评论...
验证码 换一张
取 消