如何在iframe中放置覆蓋圖

Question

我試圖從iframe放置覆蓋圖並且沒有成功。

我的主html用html這樣的函數調用body中的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

大多數情況下，當需要ove發生轉折，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>