ポップアップ・ウィンドウについて

質問

リンクをクリックすると、別画面でサイズ指定された画面が表示される仕組み（ポップアップ・ウィンドウ？）を作りたいと思っています。商品の説明ボタンを押すとその商品の詳細な説明が表示される、というイメージです。

そこで、
http://www.akikobrand.com/html/02_0219sample/2.windowopen/index.html#
のサイトにあるソースを参考にして作ってみたのですが、この方法ですと、ポップアップが表示された時点でリンク元のページが勝手にページトップまで戻ってしまいます。この方法は、とてもシンプルで私でもすぐに使えたのですが、リンク元のページはかなり長い（ユーザーさんにはスクロールダウンして見てもらうつもりです）のでページのトップまで戻ってしまうと不都合があります。

なんとか、リンク元の表示はそのままにして簡単にポップアップを出す方法はないでしょうか？

私のページでは、リンク元のページから８個のリンクボタンを設置してそれぞれ別の商品説明画面（ポップアップ）を出したいと思っています。

どなたかご存知の方がいらっしゃいましたらどうぞよろしくお願いいたします。

回答No.3

Bo_Bo · ベストアンサー

アンカーのURI指定に、“javascript:void(0);”を設定してください。

<a href="javascript:void(0);" onClick="...">詳細表示</a>

“#”を指定すると、現在のページを読み直すブラウザがあります。

<input type="button" onClick="..." value="詳細表示">

なら、そう言う心配が要らないけど・・・

お礼

ご回答ありがとうございました。私が求めていたのはこれでした。#のかわりに"javascript:void(0);"を入れたら思った通りにリンク元の画面は動かずにポップアップが開くようになりました。助かりました。ありがとうございました。

回答No.2

taka451213

こんばんは。

<a href="#" onclick="・・・
を
<a href="#1" onclick="・・・
にしてしまうのはダメですか？
１とか２には、別に意味はありません・・・。
(^^ゞ

お礼

ご回答ありがとうございました。早速試してみましたが、#のあとに1とか2をつけてみても、やっぱりリンク元の画面はページトップに戻ってしまいました。。。でもでも、ご回答いただけたのはとても嬉しかったです。ありがとうございました。

回答No.1

mitochan1975

参考URLのページを例にとると・・

<a href="#" onclick="window.open('1.html','win1','width=350,height=400');"><img src="img/1.gif" width="130" height="19" border="0"></a>

を

<a href="1.html" target="_blank"><img src="img/1.gif" width="130" height="19" border="0"></a>

とすれば、新しいウィンドウが開くだけです。
ただ、<a>タグのスタイルをtext-decoration:noneにしておいた方がいいかもしれません。

お礼

早速ありがとうございました。この方法ですと、新しく開くウィンドウのサイズは指定できないのではないでしょうか。一番に回答をいただけて嬉しかったです。どうもありがとうございました。