24

我需要在单击按钮时在另一个 HTML 页面中显示或加载 HTML 页面。我需要在以主 html 页面为背景的弹出窗口中使用它。

任何帮助表示赞赏。

4

10 回答 10

34

iframe是您可用于将其他 html 页面调用到您的网页中的标签

<iframe src="http://www.google.co.in" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
    </iframe>
于 2012-08-20T05:45:42.843 回答
11

你可以使用 jQuery

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#divId").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="divId" style="display:none;"></div>
  </body> 
</html>

在单击事件上，您可以使其显示块。

于 2013-08-07T13:46:32.980 回答
6

使用 iframe 在页面中加载页面。以下应该作为一个很好的起点。

<body>
  <div>
    <iframe src="page1.html" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
    </iframe>
  </div>

  <br/>

  <div>
    <a href="page2.html" target="targetframe">Link to Page 2</a><br />
    <a href="page3.html" target="targetframe">Link to Page 3</a>
  </div>
</body>
于 2012-08-20T05:43:22.327 回答
4

你为什么不使用

function jsredir() {
  window.location.href = "https://stackoverflow.com";
}
<button onclick="jsredir()">Click Me!</button>

于 2016-10-15T10:30:12.560 回答
3

您要问的不是弹出窗口，而是灯箱。为此，诀窍是在后面显示一个半透明层（称为叠加层），并在其上方显示需要 div 的层。

希望你熟悉基本的 javascript。使用以下代码。使用 javascript，将 display:block 更改为 display:none 以显示/隐藏弹出窗口。

<div style="background-color: rgba(150, 150, 150, 0.5); overflow: hidden; position: fixed; left: 0px; top: 0px; bottom: 0px; right: 0px; z-index: 1000; display:block;">
    <div style="background-color: rgb(255, 255, 255); width: 600px; position: static; margin: 20px auto; padding: 20px 30px 0px; top: 110px; overflow: hidden; z-index: 1001; box-shadow: 0px 3px 8px rgba(34, 25, 25, 0.4);">
        <iframe src="otherpage.html" width="400px"></iframe>
    </div>
</div>
于 2012-08-20T05:49:00.157 回答
1

你可以试试fancybox： http: //fancyapps.com/fancybox/

你只需要加载 jquery 和 fancybox.css 和 fancybox.js ：

<!-- Add jquery -->
<script type="text/javascript" src="jquery.min.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>

并在您的页面中添加 js 代码：

$("youBtnSelector").click(function() {
    $.fancybox.open({
        href : 'you html path',
        type : 'iframe',
        padding : 5
    });
})

这很容易做到

于 2012-12-24T06:25:24.483 回答
1 
<button onclick="window.open('http://www.google.com');">Open popup</button>
于 2012-08-20T05:42:05.370 回答
0

怎么样

<button onclick="window.open('http://www.google.com','name','width=200,height=200');">Open</button>
于 2012-08-20T05:51:53.853 回答
0

如果您正在页面中寻找一个弹出窗口，那不是一个新的浏览器窗口，那么我会看看 Javascript 中的各种“LightBox”实现。

于 2012-08-20T05:59:55.237 回答
0

iframe 非常适合它的功能，但它不是弹出窗口。我在我的一些页面上使用它，这样浏览器只需要加载新内容，这使得加载速度更快并节省带宽。

使用在当前窗口顶部加载的弹出窗口，这是弹出窗口的真正目的，在不卸载您所在页面的情况下在您所在的页面上显示内容。iFrame 用于在窗口中显示内容时保留主页。拥有带有 < *editable content > 的默认页面的旧方法有些过时了。其他人提供了代码，我将使用 -onclick- 函数添加是否具有 -popup- 透明度。我不会去的！

希望这可以解决问题。

于 2021-11-15T14:00:29.243 回答