我尝试在单击弹出链接时打开 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 文件。
请帮忙。
<a href="jbn.html" target="popup" onclick="window.open('jbn.html','jbnWindow','width=600,height=400')">abc</a>
<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 来实现这一点...但是当你点击弹出窗口之外时它会被杀死..希望这可以帮助你
<a href="#" onClick="MyWindow=window.open('jbn.html','MyWindow','width=600,height=300'); return false;">Open Jbn</a>