Question

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

我的主html在主体中调用iframe，其中包含html;

<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/（在官方3发布之前我会坚持2.3.2 ）。

另外，请尝试此调整：

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

如何在iframe中放置叠加层

1 个答案: