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!
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.
[color=red]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;
}[/color]
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.
Thanks for your reply!
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.
Gotcha. Yes, I think maybe a shadow box. Recommendations?
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.
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
It’s a screenshot of the design file. 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.
I’m not sure how up-to-date this list is, but it’s still pretty useful: http://planetozh.com/projects/lightbox-clones/
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:
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.
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.
<!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 "The Rock" 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 & 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>© 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>
Good work Ron but the popup might look better centred and using fixed positioning (If ie6 support isn’t required)
#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;
}
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.
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.
Beautiful!
Don’t forget to erase the word “test” from the <title>, and to change:
<!-- only for this testpage! --><meta name="robots" content="noindex, nofollow" />
in:
<meta name="robots" content="index, follow" />
to be indexed by Google. 
Oh gosh, thank you. Can’t believe I missed that!