html - 如何在 iframe 中放置叠加层

Question

我正在尝试从 iframe 放置叠加层，但没有成功。

我的主要 html 使用这样的 html 在正文中调用 iframe；

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

这个“links.html”文件保存了覆盖的链接。像这样；

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

我已将它们放在主 html 和 links.html 文件中，但它们不起作用:(

覆盖看起来有点像这样，

<!-- 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> 

我怎样才能做到这一点？

提前致谢

Answer 1

大多数情况下，当需要覆盖时，生成所需输出的 ​​css 属性通常是最好的选择。我建议您研究一下 Twitter 的 Bootstrap，它是一个很棒的框架，并且对我相信您正在尝试完成的工作有巨大的帮助：http: //getbootstrap.com/2.3.2/（我会坚持使用 2.3。 2直到官方3发布）。

另外，试试这个调整：

<!-- 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>