点击弹出一个html文件

问题描述 投票:0回答:3

我尝试在单击弹出链接时打开 html 页面 我是html门外汉。我尝试用 lightbox、jquery 等方法阅读很多资料。我一点也不熟悉。

目前,我有页面(poem.html),该页面转到第二页(jbn.html)。但我希望它能弹出来。

对于html5,我发现对话是标准方法,但我找到的示例不包含外部html文件。我必须把所有内容写在对话标签内。但是,就我的目的而言,如果我可以弹出外部文件会更好。 最简单的例子是:

poem.html:

<!DOCTYPE html>
      <head>
        <title>Bangla Kobita</title>
      </head>
      <body>
        <div id="container">
          <div id="header">
          <div id="content">
           <h3>XYZ</h3>
            <ol>
               <li><a href="jbn.html">abc</a></li>
            </ol>
          </div>
        </div>
      </body>
    </html>

jbn.html

<!DOCTYPE html>
<head>
<title>Bangla Kobita</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>

<body>
<div id="container">
  <div id="header">
    <div id="content">
      <h2>jbn</h2>
      <h3>xyz</h3> 
     some text here
    </div>
  </div>
</div>
</body>
</html>

作为新手,我还没有设法以弹出窗口的方式打开html文件。

经过几天的努力,我成功地打开了一个图像文件作为弹出窗口:

      <div class="lb-overlay" id="jbn">
    <img src="kobita/jbn.png" alt="jbn" class="poems"/>
    <a href="poem.html" class="lb-close">Close</a>
      </div>

其中 lb-* 在 css 中定义。 但我无法打开 html 文件。

请帮忙。

html popup
3个回答
1
投票
<a href="jbn.html" target="popup" onclick="window.open('jbn.html','jbnWindow','width=600,height=400')">abc</a>

0
投票
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="hidden">
     <div data-role="popup" id="externalpage">
         <iframe src="jbn.html" 
                 width="500" 
                 height="500" 
                 seamless>
          </iframe>
     </div>
</div>    
<!-- Poem.html -->
<!DOCTYPE html>
      <head>
        <title>Bangla Kobita</title>
      </head>
      <body>
        <div id="container">
          <div id="header">
          <div id="content">
           <h3>XYZ</h3>
            <ol>
               <li><a data-rel="popup"  data-role="button" href="#externalpage">abc</a></li>
            </ol>
          </div>
        </div>
      </body>
    </html>

你可以使用 jQuery mobile 来实现这一点...但是当你点击弹出窗口之外时它会被杀死..希望这可以帮助你


0
投票
<a href="#" onClick="MyWindow=window.open('jbn.html','MyWindow','width=600,height=300'); return false;">Open Jbn</a>
© www.soinside.com 2019 - 2024. All rights reserved.