Question

我在点击弹出窗口链接时尝试打开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文件。

请帮助。

Answer 1

<a href="jbn.html" target="popup" onclick="window.open('jbn.html','jbnWindow','width=600,height=400')">abc</a>

Answer 2

<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实现这一点......但是当你在弹出窗口外点击它会被杀死。希望这可以帮到你

点击弹出一个html文件

2 个答案: