jQueryのDialogメソッドについて

Question

jqueryのdialogを使用してmodal画面を表示させています。
やり方としてはiframeを利用して中身を随時変更して表示しています。

html = "<iframe src='" + url + "' id='" + 指定したいId + "' frameborder='0' scrolling='auto'>";
$(html).dialog(高さなどのオプションを入れた変数);

ieやchromeでは特に問題なく動作しているのですが、
Firefoxの場合のみなぜか親画面の最下部に変なスペース（空白）が出来てしまいます。
そのせいでスクロールバーが親画面に表示されます。
dialogが表示されればスペースが表示され、閉じれば消えます。
iframeが中身は出ないものの画面下部に領域として確保されて出ている？
と思っていますが、どうなのでしょうか。
Firefoxのみこの現象になっており、解決策が見えません。。。
Firefoxでdialogを使用するにあたり何か注意点等ありますでしょうか？

---------------追記

display:blockをnoneに変更するともちろんダイアログは消えますが、
親画面のスペースも消えます。
やはり、ダイアログ分の領域が何故か画面下部に表示されているみたいなのですが、わかりますでしょうか。

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS/jsなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

Answer 1

Firefoxでiframe を使用するとなるのだと思います。
ダイアログでiframeを使うメリットがない気がします。
divではのほうが制御しやすいです。

Comments

[syncrock]

回答ありがとうございます。
まだその事象についてネットでの記載を見つけられていませんが、
現状、何も回避策はないということでしょうか。

[himakuma]

基本iframeを避けるので、その現象に陥ったことがないのですが、
埋め込み部分のソースもないとどんな状況で発生しているかが分からないです。
$(html)の部分は普通は埋め込み部分のID等を指定すると思うのですが、
変数htmlはどこかにappendしていますか？
していない場合、もしかしたらBODYの最後、HTMLタグの外に生成されてしまっているかもです。

[syncrock]

>HTMLタグの外に生成されてしまっているかもです。
その通りです。
appendしていないので、（おそらく）外に生成されています。
親画面の下に意味のない白い空白が出来ている感じです。
動的に内容を変えたかったのでネットでの内容を参考にiframeで行うようにしたのですが、対応不可ということでしょうか。。。

[syncrock]

ちなみにiframeにした理由として、別ページとしたかったというのがあります。
dialogで表示したページの中で処理を行い親に返したいと思っておりました。

[himakuma]

であればappendすれば直る気がします。
適当なappend用のタグを用意して（DIV等）、
そこにappendして、処理終了後に手動でそのタグ配下削除するようにしては？
HTMLタグのルートタグ配下に他のタグを記載するのがＨＴＭＬのルールなので、
外に作られてしまっている場合は、回避不可です。（バグです）

[syncrock]

divにappendするようにして、そのdivに対してdialogメソッドを実行しましたが変わらずでした。
変わらずHTML外に空白が出来てしまいました。。

[himakuma]

iframe に対してdialogメソッドを実行しても駄目ですか？

[syncrock]

同じでした。。

[himakuma]

Firefoxの開発ツールで、空白部分の情報を見てみてください。
どうなってますか？

[syncrock]

それがどこに当てても当たらないんです。
要素を選択しようとしても選択が出来ない状態です。

[himakuma]

ダイアログ生成後にiframeを開発ツールから消すとどうなりますか？

[syncrock]

iframeを消すと空白も消えました。

また、一応解決？なのかわかりませんが。
これまでpositionをrelativeにしていましたが、absoluteに変更し、topを0にすると問題なく表示されました。
（html外の空白が無くなりました。）
なぜなくなったのかは、僕の知識ではまだわかっていませんが。。。

[himakuma]

なんとなく分かりました。相対位置にしていたのを絶対位置に変更したので、
ブラウザの大きさに左右されなくなったのですね。
positionをrelativeの状態でブラウザのサイズを変更すると空白が狭まったりしませんか？

[himakuma]

http://www.css-lecture.com/log/css/037.html
ここにいい資料がありました

[syncrock]

資料ありがとうございます。
位置の問題であればなぜiframeが上部に表示されているのにもかかわらず、iframe分の余白が下に出来てしまったのかが謎ですが。。。

>positionをrelativeの状態でブラウザのサイズを変更すると空白が狭まったりしませんか？
特に狭まったりというのは見受けられませんでした。

[himakuma]

そうなると、挿入先のタグの問題な気がしますね。
全体が分からないですが、タグの階層や、ＣＳＳの問題ですね。

[syncrock]

そうですね、そのような気がします。
こちらの記述の仕方が問題であると思いますので、一旦締めたいと思います。
やりとりありがとうございました。