よく、リンクをクリックすると新規に親窓で開くページがあります文末はその小窓を画面中央に開く、どこかでみたサンプルです。ここで、Excel2003のヘルプ窓のように、次のように動作させたいです。 (1)高さはクライアント画面の高さを取得して縦幅一杯に（例：768、600px等可変に） (2)幅は固定値（例：200px等と指定） (3)場所は右端（各クライアントの画面の幅－小窓幅（例：200px）＝小窓の左上角） (4)元窓（親窓）の幅はそのまま (5)ブラウザ依存せず動作する方が嬉しいですまとめると、リンクを開くと画面右端ピッタリに次のような小窓が現れるイメージです。 ┌────┬─┐ │親窓 │小│ │ │窓│ │ │ │ └────┴─┘ よろしくお願いします。 function winOpen(url,wid,hei,wname){ window.name = wname; sw = screen.availWidth; sh = screen.availHeight; wl = (sw-wid)/2; wt = (sh-hei)/2; about = window.open (url,"SmallWindow","width=" + wid + ",height=" + hei + ",,toolbar=no,location=no,directories=no,menubar=no,resizable=yes,scrollbars=yes,left=" + wl + ",top=" + wt); } クリックで小窓を開く

小窓を開くJSで、高さを調節した表示位置を画面の右端にしたい

解決済

質問者：litton101
質問日時：2006/01/25 10:11
回答数：3件

よく、リンクをクリックすると新規に親窓で開くページがあります
文末はその小窓を画面中央に開く、どこかでみたサンプルです。

ここで、Excel2003のヘルプ窓のように、次のように動作させたいです。

(1)高さはクライアント画面の高さを取得して縦幅一杯に（例：768、600px等可変に）
(2)幅は固定値（例：200px等と指定）
(3)場所は右端（各クライアントの画面の幅－小窓幅（例：200px）＝小窓の左上角）
(4)元窓（親窓）の幅はそのまま
(5)ブラウザ依存せず動作する方が嬉しいです

まとめると、リンクを開くと画面右端ピッタリに次のような小窓が現れるイメージです。
┌────┬─┐
│親窓　　　│小│
│　　　　　　│窓│
│　　　　　　│　│
└────┴─┘

よろしくお願いします。

<html>
<head>
<script language="javascript" type="text/javascript">
function winOpen(url,wid,hei,wname){
window.name = wname;
sw = screen.availWidth;
sh = screen.availHeight;
wl = (sw-wid)/2;
wt = (sh-hei)/2;
about = window.open (url,"SmallWindow","width=" + wid + ",height=" + hei + ",,toolbar=no,location=no,directories=no,menubar=no,resizable=yes,scrollbars=yes,left=" + wl + ",top=" + wt);
}
</script>
</head>
<body>
<a href="#" target="new" onClick="winOpen('../komado.html','540','420','dot'); return false;">
クリックで小窓を開く
</a>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1ベストアンサー

回答者： yukio1
回答日時：2006/01/25 13:57

あまり要望を満たしていないかもしれませんが・・・

・JS部
function openNewWin(url, name){
window.open(url, name, 'status=yes,resizable=yes,top=0,left='+getScreenHEIGHT()/2+',width='+getScreenWIDTH()/2+',height='+getScreenHEIGHT());
}

//スクリーンサイズから画面サイズ取得（高さ）
function getScreenHEIGHT(){
if(!!window.screen){
//N4,N6,Moz,IE,共用
return screen.height-80;
}else{
//上記以外
return null;
}
}

//スクリーンサイズから画面サイズ取得（幅）
function getScreenWIDTH(){
if(!!window.screen){
//N4,N6,Moz,IE,共用
return screen.width-12;
}else{
//上記以外
return null;
}
}
・HTML呼び出し部
<a href="#" target="new" onClick="openNewWin('komado.html','a'); return false;">

- 0
- 件

通報する

この回答へのお礼

yukio1さん、貴重なレスありがとうございます。

早速確認させていただきました。

縦方向については、画面の上辺、下辺にビシっとあいました。
横方向については、なぜか画面のおおむね中央のやや
右に表示されます。
ちなみに、1600x1200なんですが・・・

ここは、どこを書き換えたら上辺、下辺のように
びしっと決まるでしょうか・・

すみません、現状でも十分感動的ですが、もしよろしければ補足的にご教示いただけますと幸いです。

まずは御礼申し上げます。

通報する

お礼日時：2006/01/25 23:41

No.2

回答者： yukio1
回答日時：2006/01/26 00:15

window.open()関数の第三パラメータを少々いじってやれば可能ではないでしょうか。

現在の第三パラメータの設定は、分割してやると、

status=yes,
resizable=yes,
top=0,
left='+getScreenHEIGHT()/2+',
width='+getScreenWIDTH()/2+',
height='+getScreenHEIGHT()

こうですね。

関係してくるのはtop以下4つです。
topは新しくウィンドウを開く開始位置上辺、
leftは同ウィンドウを開く開始位置左辺、
widthは同ウィンドウの横幅、
heightは同ウィンドウの縦幅です。

上辺と縦幅は問題ないとのことですので、topとheightは変更せずに、
左開始位置のleftと横幅のwidthの値を少々変更してやればよいのではないでしょうか。

ちなみにgetScreenHEIGHT()で取得できる値は画面の縦幅、おそらく1200が取得できるはずです。
getScreenHEIGHT()/2としているので、litton101さんの環境下では、600をセットして
いることになると思います。

getScreenWIDTH()も同様に横幅を取得しているので、1600が入ってくるはずなので、
/2しているので、widthは800ということになっているはずです。

と、いった感じの補足でよいでしょうか。