Загрузите HTML-страницу в другую HTML-страницу

Мне нужно отобразить или загрузить HTML-страницу на другой странице HTML нажатием кнопки. Мне нужно это в всплывающем меню с главной страницей html в качестве фона.

Любая помощь приветствуется.

Ответ 1

iframe - это тег, который вы можете использовать для вызова других html-страниц на свою веб-страницу.

<iframe src="http://www.google.co.in" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
    </iframe>

Ответ 2

Вы можете использовать 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>

в событии клика вы можете сделать его отображаемым блоком.

Ответ 3

Загрузите страницу на странице с помощью 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>

Ответ 4

То, что вы спрашиваете, это не всплывающее окно, а лайтбокс. Для этого трюк состоит в том, чтобы отобразить полупрозрачный слой позади (называемый наложением), и для этого требуется div над ним.

Надеюсь, вы знакомы с базовым javascript. Используйте следующий код. С javascript измените отображение: блок на/из дисплея: 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>

Ответ 5

<button onclick="window.open('http://www.google.com');">Open popup</button>

Ответ 6

Как насчет

<button onclick="window.open('http://www.google.com','name','width=200,height=200');">Open</button>

Ответ 7

Если вы ищете всплывающее окно на странице, это не новое окно браузера, я бы взглянул на различные реализации LightBox в Javascript.

Ответ 8

вы можете попробовать 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
    });
})

Легко сделать

Ответ 9

Почему бы вам не использовать

function jsredir() {
  window.location.href = "stackoverflow.com"
}

<button onclick="jsredir()">Click Me!</button>