24

ボタンクリックで別のHTMLページ内にHTMLページを表示またはロードする必要があります。これは、メインのhtmlページを背景とするポップアップで必要です。

どんな助けでも大歓迎です。

4

10 に答える 10

34

iframeは、他のhtmlページをWebページに呼び出すために使用できるタグです。

<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 
<button onclick="window.open('http://www.google.com');">Open popup</button>
于 2012-08-20T05:42:05.370 に答える
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 に答える
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は、ウィンドウ内にコンテンツを表示しながらメインページを保持するために使用されます。<*編集可能なコンテンツ>を含むデフォルトページを作成する古い方法は、やや時代遅れです。他の人は、-popup-wither透明度を使用して-onclick-関数を使用して追加するコードを提供しています。私は一緒に行きません！

これで問題が解決することを願っています。

于 2021-11-15T14:00:29.243 に答える