javascript - 流过当前页面的页面

Question

我在浏览这个网站时看到了一件了不起的事情:

http://www.free-css.com/free-css-templates/page202/flat-theme

当您点击 live demo 时，它会在当前页面上打开另一个页面，而不会重定向或打开另一个窗口。

我想在我的网站上制作同样的东西，我尝试了很多东西，但都没有用。关于如何做到这一点有什么想法吗？

Answer 1

您问的是 iframe，您可以阅读更多相关信息 W3schools

关于您可以使用的弹出窗口 Bootstrap Modal

这是一个 Demo为你想要的，所以你可以尝试一下

代码:

.btn {
    margin: 20px;
}
.modal-content {
    width: 800px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
         <!-- this is where you got the other page you want to show -->
.        <iframe src="http://www.w3schools.com/html/html_iframe.asp" height="500" width="750">
        
        </iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>