How can I place overlays in an iframe

Question

I am trying to place an overlay from an iframe and am having no success.

My main html calls an iframe in the body with an html like so;

<iframesrc="links.html"></iframe>

this "links.html" file holds the links to overlays. Like so;

<a class="popup-link" href="#overlay-1" onclick="overlay.show('overlay-1', this);return false;">Click here to see overlay 1</a>

I have placed them in the main html and in the links.html files but they don't work :(

The overlays look kinda like this,

<!-- PANEL 1.1 -->
<div class="common-overlay" id="overlay-1">
<div class="head">
<p><a class="common-overlay-close" href="#close">Close [x]</a></p>
</div>
<div class="body">
<div class="main">
<div class="title subtitle">
<h2>Forgot password?</h2>
</div>
<div class="container alternate buttons-last">
<div class="container-body">
<p class="overlay-intro">Please enter your ID.</p>
<!-- ========================================== -->
<!-- EXAMPLE FORM - DO NOT ACTUALLY SUBMIT FORM -->
<!-- ========================================== -->
<form action="[REPLACE]" class="column-form" enctype="multipart/form-data"        method="post">
 <p><label for="Display_name">ID:<span class="required">*</span></label><span><input           name="ID" size="25" value="" style="width: 200px;" class="required" type="text" /></span>           </p>


<p>
<p><a href="#">Don't know ID?</a></p>
<div class="overlay-rule"><hr />
</div>
<p class="first"><input class="btn-arrow-pri" name="submit" value="Proceed"  type="submit" /></p>
</form>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div> 

How can i accomplish this?

Thanks in advance

Answer 1

Most of the time when the need of overlaying occurs, css properties that generate an output towards what is desired is generally the best bet. I'd recommend looking into Twitter's Bootstrap, it's a great framework and be an immense help towards what I believe you're trying to accomplish: http://getbootstrap.com/2.3.2/ (I'd stick w/ 2.3.2 until the official 3 is released).

Also, try this adjustment:

<!-- PANEL 1.1 -->
<div class="common-overlay" id="overlay-1">
    <div class="head">
        <p><a class="common-overlay-close" href="#close">Close [x]</a></p>
    </div>
    <div class="body">
        <div class="main">
            <div class="title subtitle">
                <h2>Forgot password?</h2>
            </div>
            <div class="container alternate buttons-last">
                <div class="container-body">
                    <p class="overlay-intro">Please enter your ID.</p>
                    <!-- ========================================== -->
                    <!-- EXAMPLE FORM - DO NOT ACTUALLY SUBMIT FORM -->
                    <!-- ========================================== -->
                    <form action="[REPLACE]" class="column-form" enctype="multipart/form-data" method="post">
                        <p><label for="Display_name">ID:<span class="required">*</span></label><span><label>
                            <input name="ID" size="25" value="" style="width: 200px;" class="required" type="text"/>
                        </label></span></p>
                        <p>
                        <p><a href="#">Don't know ID?</a></p>
                        <div class="overlay-rule"><hr />
                        </div>
                        <p class="first"><input class="btn-arrow-pri" name="submit" value="Proceed"  type="submit" /></p>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="footer"></div>
</div>