-1

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>

どうすればこれを達成できますか?

前もって感謝します

4

1 に答える 1

0

ほとんどの場合、オーバーレイが必要な場合は、必要な出力を生成する css プロパティが一般的に最適です。Twitter の Bootstrap を調べることをお勧めします。これは優れたフレームワークであり、あなたが達成しようとしていると私が信じていることに対して非常に役立ちます: http://getbootstrap.com/2.3.2/ (私は 2.3.公式の 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>
于 2013-08-07T00:38:53.413 に答える