Insert div content into iframe (or alternative solution working with prettyPhoto jquery)

Question

Im working on a corporate webpage working with isotope and prettyPhoto and I look for a way to insert the content of a div into an iframe:

isotope serves to display job opportunities (tiles) and when users click on one, prettyPhoto displays a lightbox with the job description. Im also using prettyPhoto to display pictures and videos, part of the code which is working great.

My problem is that pretty photo only display inline content when it comes to text information and it seems impossible to make the width responsive. This is why I did though about using iframes:

<a href="#Descriptiondiv?iframe=true&width=80%" rel="prettyPhoto"></a>

My problem is that it doesn't show the div but the whole page within the iframe. Is there a way to insert div content into iframe or any other way that works with prettyPhoto? I tried several other lightbox options but this one was the best I found.

I did look for div within iframe but it seems impossible too..

Sorry if this isn't very well explained, Im not a pro (if you were still wondering) thanks for any information / alternative solution you could think about.

Best,

Answer 1

Do you really need to use iframe? This works for me:

CSS:

#Descriptiondiv {
   width:80% !important;
   height:250px;
   display:none;
}

HTML:

<div id="Descriptiondiv">  CONTENT HERE </div>
<a href="#Descriptiondiv" rel="prettyPhoto">link</a>

You need to use the !important or else the prettyPhoto will use the default width (500).