Using colorbox to display a separate document

Question

I'm using colorbox to display a separate but local document when a certain link is clicked. The problem and I've never done this before so it might be obvious, I can't get the page that pops up to be styled with CSS. I don't know how this works, will the page that pops up be styled with the CSS from the page that called it? I thought I couldn't or didn't need to have the popup document to have a header or body tags. I also would like to do this without using an iframe.

This is a selection from my html:

<li class="event priority1">
  <a href="detail_img.html" class="cbox-popup">
    <div class="content">Lorem Ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="lower">
      <hr>
      <span class="date">03.13.2012</span>
      <span class="type">Regulation</span>
      <img src="img/icon-lg-financial.png" alt="" height="19" width="26" />
    </div>
  </a>
</li>

The document that it should load is:

<div class="popup wrap">
  <div id="content">
    <header>
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
      <div class="info">
        <time datetime="">05.10.2012</time>
        <h2>Legislation</h2>
        <img src="img/icon-popup-health.png" alt="" width="20" height="18" />
      </div>
    </header>
    <div class="inner">
      <img src="img/popup_img-fullSizeplaceholder.gif" alt="" width="765" height="491" />
    </div>
  </div>
</div>

And finally the javasript I'm using is:

    <script>
    jQuery(function() {
      jQuery('.cbox-popup').colorbox({maxWidth: '75%'});    
    });
    </script>

So if I don't have the header and body tags the document pops up but it's unstyled. If I have a complete document with html header and body tags nothing shows.

You shouldn't put a `div` inside an `a`, see here for more info: http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct — WhyNotHugo, Aug 10 '12 at 14:42

WhyNotHugo · Accepted Answer · 2012-08-10T15:01:56.510

0

Again, as seen in the examples page; you need to set inline to true, and link to an anchor:

<script>
jQuery(function() {
  jQuery('.cbox-popup').colorbox({
    maxWidth: '75%',
    inline: true
  });
});
</script>

Link need to point to an anchor:

<a href="#stuff-to-be-shown" class="cbox-popup">

Then wrap everything you want shown like this:

<div style='display:none'>
  <div id='stuff-to-be-shown'>
    Blah blah
  </div>
</div>

edited Aug 10 '12 at 15:01

answered Aug 10 '12 at 14:50

WhyNotHugo

9,423
6
62
70

Don't the OP wants the div to `pop-up`? – DavChana Aug 10 '12 at 15:01
It's still not working. I'm calling from one document another document that I want to display with colorbox. I think I would only need to use display:none if it was in the same document I was calling it from. Does that make sense? So when I do it the way you have above nothing displays. – xoam Aug 10 '12 at 15:02
Yes, I've just linked to the examples page, take a look at how `inline`works, it does just what he wants. – WhyNotHugo Aug 10 '12 at 15:02
If you want to load a different document into the popup, you'll need to use `$.ajax()` to load that other document into `stuff-to-be-shown`, and then show it. – WhyNotHugo Aug 10 '12 at 15:04
Right now the way that I have it set up in my first question the colorbox popup shows fine without using ajax it just shows unstyled, but it shows. What is the appropriate way to structure a document that will just be used as a popup. Do I include header and body tags? Or do I just wrap it in a div. Which is the way it is currently displaying. Then how do I target it with CSS styles? – xoam Aug 10 '12 at 15:11
The CSS from the first document should be applied to the second one as soon as it's shown. Try something obvious, like setting a font size for *, and it should affect the popup as well. – WhyNotHugo Aug 10 '12 at 15:17
You are correct sir! It was just me messing with my CSS too much and not structuring correctly. Thank you. So the example I first posted does work just not locally you need to have it on a server or something. Have a good day I certainly am having a better one. – xoam Aug 10 '12 at 15:32

Using colorbox to display a separate document

1 Answers1