SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Remove browser box/border from pop up window

    Does anyone have any suggestions for removing the browser box/border from the pop up on this page? Click the green, "People Say" quote image on top left to see pop up. Or, have another suggestion? It's an html page in the pop up not an image.

    Thanks sooo much!

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Is this a trick question???

    You can delete the on-page styles from the testimonial page that are creating the brown border and it will disappear. You might consider including the body {styles} in those deletes, too.
    Code:
    html:before,html:after,body:before,body:after {
        content:"";
        background:#9C6840;
        position:fixed;
        display:block;
        z-index:5;
    }
    /* ...and position them! */
    html:before{
        height:10px;
        left:0;
        right:0;
        top:0;
    }
    html:after{
        width:10px;
        top:0;
        right:0;
        bottom:0;
    }
    body:before{
        height:10px;
        right:0;
        bottom:0;
        left:0;
    }
    body:after{
        width:10px;
        top:0;
        bottom:0;
        left:0;
    }

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A trick question? No...want the brown border. I'm not following you.....oh, I see what you mean. No, I meant the browser window not the brown border. I've attached a screenshot. screenshot.JPG

    Thanks for your reply!

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    The screen shot is awaiting approval.

    I followed the link in your post using Firefox and clicked on the "People Say" image. It opened the testimonial page in a new tab.

    After reading your reply, I opened the link to the home page in Opera and clicked on the "People Say" image. It opened a smaller "popup" window showing the testimonial page. THIS must be what you were expecting to happen when you posted the thread and FF did not behave as intended for me. Thus my silly remark about the "trick question".

    So it sounds like you would like for the testimonial page to open in something like a shadowbox, maybe, rather than spawning a new browser window? I'm not sure if it's possible to spawn a new browser window without showing the "chrome" of the window.

  5. #5
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gotcha. Yes, I think maybe a shadow box. Recommendations?

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You can't achieve this with the built in window UI browsers supply, IE used to have this as a feature but it had some major security concerns which were the bigger issues with it. If you want something you can customize a lytebox script is what you would be looking for as you have full control over the look and how it's displayed to the user.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Sculley View Post
    Gotcha. Yes, I think maybe a shadow box. Recommendations?
    Sorry to be slow responding. "shadowbox" was the wrong term; my apologies for that, too. I have never used a lightbox other than as a simple gray overlay, so I would not be comfortable recommending the more sophisticated scripts available.

    There have been several discussions in the forums about lightboxes. I recommend that you search the forums for lightbox or light-box, etc., and see what you find. In the meanwhile, someone else may join this thread who has first hand experience.

    I'm curious about that screen shot that you posted. It's more like a thumbnail shot. It does not appear to have a browser window around it like the "popup" that I saw in Chrome. Is that an actual screen shot or a PhotoShop image of what you desire?

    Cheers

  8. #8
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a screenshot of the design file. Thanks much. I've used lightbox before - just not with an html page.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sculley View Post
    Thanks much. I've used lightbox before - just not with an html page.
    It's basically a similar approach Most of the lightboxes on offer can do images/or text content.

    If you are using jquery there's loads to choose from so just find one with the features that you need.

  10. #10
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,408
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    I'm not sure how up-to-date this list is, but it's still pretty useful: http://planetozh.com/projects/lightbox-clones/

  11. #11
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Without all lightbox-stuff you can do it yourself with a simple "css-popup" in the page itself; that cannot open a new tab or browser window.
    The method is:
    • Paste the text of the pop-up in the appropriate place in the page structure (here: in the end of the <div id="center"> container).
    • Add some css for styling in the stylesheet.
    • Add a small "unobtrusive" javascript just before the </body></html>.
    • Ready!

    The "unobtrusive" of the javascript is that if javascript is disabled (or when the visitor uses a browser without javascript), the "People say" text is visible in the end of the page, before the footer. A click on the "People say" button scrolls the page to the text.

    With javascript enabled, the text is invisible, and waiting for a click on the "People say" button. After a click, the pop-up is visible in the content area, and can be hidden with the well-known X button.


  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    This is mostly Francky's code with the addition of a gray "lightbox" overlay behind the popup. (my poor-man's lightbox. )
    I added html {overflow-y:scroll} and took away the 1px vertical padding. Don't know if that has a downside or not.
    Works in FF, Chrome, and Opera. opacity does not work in IE8, so the overlay is black.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- only for this testpage! --><meta name="robots" content="noindex, nofollow" />
    <!-- http://www.sitepoint.com/forums/showthread.php?1175628-Remove-browser-box-border-from-pop-up-window -->
        <meta name="Description" content="Choose an Asheville painting company dedicated to providing the highest quality work while getting the job completed on budget and on time. SCI Painting in Burnsville near Asheville NC." />
        <meta name="Keywords" content="painting company,exterior paint company,interior paint company" />
        <meta name="author" content="SCI Painting" />
        <meta name="copyright" content="2013 SCI Painting" />
        <link rel="shortcut icon" href="http://scipainting.com/images/favicon.ico" />
        <link href="http://scipainting.com/css/style.css" rel="stylesheet" type="text/css" />
    <!--
    http://www.sitepoint.com/forums/showthread.php?1175628-Remove-browser-box-border-from-pop-up-window
    Thread: Remove browser box/border from pop up window
    Oct 31, 2013, 11:11
    Sculley
    Code by Francky
    -->
        <title>test :: Choose a Quality Asheville Painting Company</title>
        <style type="text/css">
    html {
        height:100%;
        overflow-y:scroll;
    }
    #grayOverlay {
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color:#000;
        opacity:.7;
        z-index:1;
        display:none;
    }
    #center {
        position:relative;
    }
    #popupBox {
        top:25px;
        left:25px;
        right:25px;
        bottom:0;
        overflow:auto;
        background:#f5f5eb;
        border:1px solid #e0e2cc;
        padding:10px;
        text-shadow:1px 1px white;
        z-index:1;
    }
    h2 {
        font-size:1.1em;
        font-weight:normal;
    }
    #closePopupBox1,
    #closePopupBox2 {
        position:absolute;
        right:0;
        display:none;
    }
    #closePopupBox1 a,
    #closePopupBox2 a {
        margin:15px;
        padding:0 4px;
        border:1px solid #c0c0c0;
        border-radius:6px;
        background:red;
        color:white;
        font-size:.8em;
        font-weight:bold;
    }
    </style>
    
    </head>
    <body>
    <div id="grayOverlay"></div>
    <div id="main">
        <div id="top">
            <div id="header"> 
                <div class="header"><br />
                    MARC JACKSON<br />
                    <a href="mailto:mjackson@scipainting.com">mjackson@scipainting.com</a><br />
                    phone 828.442-4107<br />
                    fax 828.645.6284<br />
                    65 Monticello Rd./<br />
                    Weaverville  NC 28787
                </div><!--end div .header -->
            </div><!--end div #header -->
        </div><!--end div #top -->
            
        <div id="top-navi">
        </div><!--end div #top-navi -->
    
        <div id="mid">
            <div id="left-side">
                <a href="#popupBox" onclick="openPop();return false">
                    <img width="125" height="60" alt="What others say" src="http://scipainting.com/images/quote-web.jpg" />
                </a>
                <img src="http://scipainting.com/images/image1-shadow.png" width="148" height="158" class="first" alt="Image 1" />
                <img src="http://scipainting.com/images/image2-shadow.png" width="138" height="141" alt="Image2" />
                <img src="http://scipainting.com/images/image3-shadow.png" width="138" height="141" alt="Image 3" />
            </div><!--end div left-side -->
        
            <div id="center">
                <div align="center"><img src="http://scipainting.com/images/image-main.jpg" width="634" height="292" 
                    alt="SCI Painting in Burnsville NC near Asheville, NC" />
                </div>
                
                <div class="txtbox">
                    <p>Residential and Commercial <br />
                    projects</p>
                    <p>Interior and exterior paint <br />
                    and stain services</p>
                    <p>Roof and floor coatings</p>
                    <p>Deck maintenance and cleaning</p>
                    <p>Pressure washing</p>
                    <p>Log home protection</p>
                    <p>Faux finishes</p>
                </div><!--end div .txtbox -->
            
                <p>SCI Painting was founded to meet the demand for high quality painting and excellent customer service.  
                The joining of two family businesses, Sineath Construction’s paint division and C. Manning Paint Service, 
                provides all of western North Carolina with unmatched services, excellence and value important to families 
                today.  These two companies together bring over 40 years of experience, quality work, reliable service and 
                a long list of satisfied customers to SCI Painting.  We are fully licensed and insured and look forward to 
                being your choice in paint companies.</p>
                
                <p>Marc Jackson, manager, is focused on keeping pace with the growing needs of clients in western North 
                Carolina and the challenges that our harsh climate can create.  He, along with our experienced employees, 
                understands the details of all jobs, residential and commercial.  Marc is dedicated to providing the highest 
                quality work while getting the job completed on budget and on time.  Marc is not satisfied until the customer 
                is satisfied.  This is all possible because of clear communication that is maintained with the client before, 
                during, and after the project.</p>
                
                <div id="popupBox">
                    <h2 id="popHeader">People say...</h2>
                    <div id="closePopupBox1"><a href="#" onclick="closePop();return false">X</a></div>
                    <p>Meredith Ledford</p>
                    <p>August 21, 2013</p>
                    <p>Marc Jackson<br />
                    SCI Painting<br />
                    65 Monticello Rd.<br />
                    Weaverville, NC 28787</p>
                    <p>Dear Mr. Jackson,</p>
                    <p>I am writing to you to reiterate my deepest gratitude for the exceptional 
                    work SCI Painting<br />
                    completed in our new home.</p>
                    <p>My husband and I were especially impressed given the large scope of the 
                    job and the limited amount of time afforded to you for completion.</p>
                    <p>Your team of professional painters arrived on the first day eager to 
                    begin and they remained productive and enthusiastic until the job was 
                    completed. Because my husband was out of town, I interacted with your crew 
                    the majority of the time. They were always very friendly and accommodating.<br /> 
                    I was especially touched when they 
                    presented with great pride to me the freshly painted nursery – it was 
                    beautiful! I also appreciated their patience as I decided which color to 
                    paint the trim. I struggled with the decision, but I never felt rushed.</p>
                    <p>Because of SCI Painting’s excellent service, my husband and I were able 
                    to complete our move into our new home before our son was born. Now we 
                    admire your handiwork every day in our new home and marvel at the how 
                    efficiently your crew completed the work. SCI Painting is a first rate 
                    business that strikes the rare balance of value and professionalism. We are 
                    so grateful that we were referred to you for the huge job our home presented 
                    and would enthusiastically recommend your services to anyone.</p>
                    <p>Thanks again and we hope to see you at &quot;The Rock&quot; this fall for some ASU 
                    football. Go APPS!</p>
                    <p>Sincerely,</p>
                    <div id="closePopupBox2"><a href="#" onclick="closePop();return false">X</a></div>
                    <p>Meredith &amp; Dwayne Ledford</p>
                </div><!-- end div #popupBox -->
            
            </div><!--end div #center -->
        </div><!--end div #mid -->
    </div><!--end div main -->
    
    <div id="footer">
        <div class="copyright">
            <p>&copy; Copyright 2013 scipainting.com | All Rights Reserved <br />
                SCI Painting is a partnership with <a href="http://www.sineathconstruction.com/">Sineath Construction in 
                Weaverville, NC near Asheville, NC</a></p>
        </div><!--end div .copyright -->
        <div class="copyright">
            <p>phone 828.645.6284 | fax 828.682.0676 | 65 Monticello Rd. | P.O. Box 1603 | Weaverville NC 28787</p>
        </div><!--end div .copyright -->
    </div><!--end div footer -->
    
    <script type="text/javascript">
    //<![CDATA[
    document.getElementById('popupBox').style.position="absolute";
    document.getElementById('popupBox').style.display="none";
    document.getElementById('popHeader').style.display="none";
    document.getElementById('closePopupBox1').style.display="block";
    document.getElementById('closePopupBox2').style.display="block";
    
    function openPop(){
        document.getElementById('popupBox').style.display="block";
        document.getElementById('grayOverlay').style.display="block";
    }
    
    function closePop(){
        document.getElementById('popupBox').style.display="none";
        document.getElementById('grayOverlay').style.display="none";
    }
    //]]>
    </script>
    
    </body>
    </html>

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    This is mostly Francky's code with the addition of a gray "lightbox" overlay behind the popup. (my poor-man's lightbox. )
    Good work Ron but the popup might look better centred and using fixed positioning (If ie6 support isn't required)
    Code:
    #popupBox {
        top:10%;
        left:0;
        right:0;
        bottom:10%;
        width:580px;
       margin:auto;
       overflow:auto;
       background:#f5f5eb;
       border:1px solid #e0e2cc;
       padding:10px;
       text-shadow:1px 1px white;
       z-index:1;
    }
    Code:
    document.getElementById('popupBox').style.position="fixed";
    I would have done the hide and show by adding classes which would then make it easier to add transitions and other effects etc.

    You can do some nice things for modern browsers with css3 only.

  14. #14
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ummm.....wow, guys. This is awesome. Now I just need to add the brown border.

    Woops....I see border now. This is great!

    Thank you sooo very much.
    Last edited by Sculley; Nov 4, 2013 at 12:10. Reason: Realized it was already there.

  15. #15
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Beautiful!
    Don't forget to erase the word "test" from the <title>, and to change:
    HTML Code:
    <!-- only for this testpage! --><meta name="robots" content="noindex, nofollow" />
    in:
    HTML Code:
    <meta name="robots" content="index, follow" />
    to be indexed by Google.

  16. #16
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh gosh, thank you. Can't believe I missed that!


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
  •