SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Can't get #firstPopupDiv to 100% opacity

    I can't get opacity of #firstPopupDiv to over ride the opacity of #outer.

    What am I missing?
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    function popup(popup_name) {
        popup_elem=document.getElementById(popup_name);
        popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';
    }
    </script>
    <style type="text/css">
    #outer {position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:#000; opacity: .75; }
    .middle {height:100%; display:table; margin:0 auto;}
    .inner {vertical-align:middle; display:table-cell;}
    #firstPopupDiv {width:200px;height:200px;background-color:white;margin:0px 0px 0px 0px;opacity:1.0; }
    </style>
    </head>
    <body>
    <div style="width:730px;margin:0 auto;">
        <button onclick="popup('outer')" style="width:730px;height:60px;font-size:30px;margin:200px 0px 0px 0px;">Send to Printer</button>
    </div>
    <div id="outer" onclick="popup('outer')">
        <div class="middle">
                <div class="inner">
                        <div id="firstPopupDiv">
                                <p>You are here.</p>
                        </div>
                </div>
        </div>
    </div>
    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Opacity is inherited, so you can't reverse this on inner elements. (opacity: 1 on an inner element means "use the full opacity that I've inherited", which is 75%.)

    You could take the inner element out of the outer div and fake its position with position: absolute etc.

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What about another position:fixed; div? A div for the transparency and one for the solid. It seems to work. How would the position:absolute; be coded?

    Current reworked code:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    
    function popup() {
        popup_elem=document.getElementById('outer');
        popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';
    	popup_elem=document.getElementById('outer2');
        popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';
    }
    
    </script>
    <style type="text/css">
    #outer {position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:#000; opacity: .75; }
    #outer2 {position:fixed; top:0; left:0; width:100%; height:100%; display:none; }
    .middle {height:100%; display:table; margin:0 auto;}
    .inner {vertical-align:middle; display:table-cell;}
    #firstPopupDiv {width:200px;height:200px;background-color:white;}
    </style>
    </head>
    <body>
    <!--<h1 style="float:left;"><a href="javascript:void(0);" onclick="popup('outer')">Click Here To Open The Pop Up</a></h1>-->
    <div style="width:730px;margin:0 auto;">
        <button onclick="popup()" style="width:730px;height:60px;font-size:30px;margin:200px 0px 0px 0px;">Send to Printer</button>
    </div>
    <div id="outer" onclick="popup()">
    </div>
    <div id="outer2" onclick="popup()">
        <div class="middle">
            <div class="inner">
                <div id="firstPopupDiv"> 
                    <p>You are here.</p>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    It might help to know what you are trying to achieve. I don't see much when I load your code into my browser, so it's not clear what you aim is. There may be some better solutions.

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for asking.

    I need a popup div that's opake, that I can fill with a few buttons and instructions, surrounded by what appears as a transparent margin, that's actually a huge transparent div that fills the display behind the opake white div.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    That seems to be what your second example code does ... unless I'm misunderstanding.

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, you're understanding is correct.

    What did you have in mind with the position: absolute option?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Ah, don't worry ... I was thinking of a different scenario when an outer element has an opacity setting and an inner element needs to be opaque. I don't think it applied here, now that I see what you are doing.

  9. #9
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Then it's time to call it a day.

    Thanks for making it possible to sleep tonight.

    I hope you have a good night also.

    Thanks again ralph.m.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •