jqueryのdialogの表示位置について

jQueryのdialogを使用していますが、
表示するダイアログのポジションを設定したいです。
表示位置として、横位置は真ん中、縦位置はウィンドウの一番上に表示したいのですが、
もしスクロールなどでページの真ん中あたりでダイアログを表示させる場合、
今の高さを取得してスクロール位置を変えずに今の位置のウィンドウ上部に表示させたいです。
・・・すいません、伝わりますでしょうか（汗）

とにかく、スクロール位置が一番上でも真ん中でも一番下でも、
ダイアログを出す位置は横位置は真ん中、縦位置はブラウザのウィンドウの一番上
（アドレスバーやお気に入りバーのすぐ下）に固定で表示したいです。
optionのpositionに設定するなどはわかっているのですが、
高さを求めるのに苦慮しております。
取得方法、実現方法をご教授ください。
お願いします。

yambejp

2017/03/21 02:22

その仕様ですと、1ポイントでもスクロールすると上に張り付いちゃいますけどよいのでしょうか？

syncrock

2017/03/21 04:21

表示されるタイミングで一番上にいけばいいので、その後スクロールするだとかは特に考えるつもりはないです。

行動規範の内容に同意します

回答2件

ベストアンサー

スクロールを気にしないでいいのなら
body🔝centerとすればいけるのでは

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
5<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet">
6<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
7</head>
8<body style="width: 100%; height: 3000px;">
9	<script type="text/javascript">
10
11 $(function() {
12  $( "#dialog" ).dialog({
13	position: {
14	    of : 'body',
15	    at: 'top',
16	    my: 'center'
17	  }
18  });
19 });
20 </script>
21	<div id="dialog" title="コメントの投稿ありがとうございます">
22		<p>
23			コメントを受け付けました。
24			<br />
25			コメントは管理人の承認後、表示されます。
26		</p>
27	</div>
28</body>
29</html>

投稿2017/03/21 07:08

date

総合スコア1820

syncrock

2017/03/21 07:27

回答ありがとうございます。表示後のスクロールは気にしないのですが、表示されるタイミングで1番上なので、イメージにのせてますとおりスクロールされている時に表示される場合にも画面の一番上に表示させたいです。提示して頂いたサンプルだと、スクロールされていればウィンドウの表示領域関係なく、ページの一番上に表示されてしまいます。。。

syncrock

2017/03/21 07:46

頂いたサンプルを参考に以下のような形で対応させて頂きました。 y = $(window).scrollTop(); //スクロール位置の取得 position: {my: 'center top+' + y + "px", at: 'center top', of: window }

行動規範の内容に同意します

これはご提示の図の「表示しているページ」の一番上の要素の位置を求めることができれば実現できます。

表示しているページの全体の高さを500とします。
表示できる範囲は300で、例示して頂いている図では、全体の高さのうち100から400の範囲が見えているとします。
このようなときに、ダイアログを100の位置に出したいということで認識は合っていますか。

上記のようなとき、「表示しているページの一番上の要素の現在位置」は-100となっているはずです。具体的にはJQuery.position().topで取得できる値がマイナス値になっているはずです。
勿論、150から450の範囲が見えていれば-150です。やり方は色々とあると思いますが、例えばこの数値を絶対値にするだけでも求める数値として利用できるはずです。

「表示しているページ」の一番上に要素が何も無ければ、何かダイアログ表示用の要素を追加するなどして、スクロール後に現在位置を取得したときにマイナス値が返ってくるようにしてみて下さい。

投稿2017/03/21 03:16

編集2017/03/21 03:22

akabee

総合スコア1947

syncrock

2017/03/21 03:25

回答ありがとうございます。その認識であっています。ちょっと調べてみます。。。

syncrock

2017/03/21 05:34

調べてみると。＞window,document オブジェクトに対して position メソッドを実行すると、IE では 0、他のブラウザでは実行時エラーになってしまいます。らしいのですが、実現可能なのでしょうか？（参考：http://d.hatena.ne.jp/cyokodog/20090224/jQueryPosSet01#pos2_position）

syncrock

2017/03/21 06:18

連投すいません。＞「表示しているページ」の一番上に要素が何も無ければ、何かダイアログ表示用の要素を追加するなどして、スクロール後に現在位置を取得したときにマイナス値が返ってくるようにしてみて下さい。こういう事でしたね。ただ、要素を新しく追加することは出来ませんので、出来ればそれ以外の考えで進めたいです。。