overflow:auto;で囲われたエリア内のボタンを押して、overflowの外枠にポップアップ表示させたい

Question

overflow:auto;を指定したエリア(以下box1と呼ぶ)
の中にあるボタンをクリックすると、box1のフレーム内で
ポップアップが展開されると思いますが、box1のフレーム外、
box1よりも上位のレイヤーで表示させるにはどうしたらよいでしょうか。

どなたかご教授お願いいたします。

Answer 1

コメントと重複してしまい申し訳ありません。
コメントは編集削除できないのですね・・・。

私の説明不足がありまして、こちらの状況は、

<div class="wrap"> <div> <a href="#popup-window">ポップアップを開く</a> </div> <div id="popup-window"> ほげほげ<br> <a href="#">ポップアップを閉じる</a> </div> </div>

上記のように、デザインの都合で、
いただいたソースを囲うようにdivが存在し、
そこに overflow:auto;がかかっている状態で、
しかもそこにposition: relative;がありまして・・・。

頂いたご回答を元にいろいろと試してみたのですが、
飛び越えることが出来ませんでした。

解決策として、下記のように

<div class="wrap"> <div> <a href="#popup-window">ポップアップを開く</a> </div> </div> <div id="popup-window"> ほげほげ<br> <a href="#">ポップアップを閉じる</a> </div>

wrapから出して、JSで対応するという方向で作業を進めることにしました。

アドバイスありがとうございました。

Answer 2

どうしてもHTML+CSSで表現したいなら、制限はかなり付きますがtarget擬似クラスを使えばできると思います。
これなら要素の階層構造に関係なくポップアップを実現できます。

まずHTML側から......ポップアップ要素にはid属性を付けます。
ボタン側はa要素で実装し、href属性にポップアップで表示させたい要素のidを入力します。

<div>
  <a href="#popup-window">ポップアップを開く</a>
</div>
<div id="popup-window">
  ほげほげ<br>
  <a href="#">ポップアップを閉じる</a>
</div>

CSS側は#popup-windowにdisplay: none;を適用し、非表示にします。
そしてtarget擬似クラスに対してdisplay: block;を設定します。

#popup-window {
  display: none;
  /* 他に装飾的要素を入れて下さい。 */ 
}
#popup-window:target {
  display: block;
}

ただし、長文記事などの縦に長いサイトだと、リンクを押してポップアップを出したり閉じたりするたびにあっちこっちに飛んでしまいます......イライラすることこの上ないので使い物になるかは分かりません。

お手軽にポップアップを実現させたいなら、javascriptを利用することをおすすめします。

Comments

[退会済みユーザー]

ご回答ありがとうございます。

私の説明不足がありまして、こちらの状況は、

<div class="wrap">
<div>
<a href="#popup-window">ポップアップを開く</a>
</div>
<div id="popup-window">
ほげほげ<br>
<a href="#">ポップアップを閉じる</a>
</div>
</div>

上記のように、デザインの都合で、
いただいたソースを囲うようにdivが存在し、
そこに overflow:auto;がかかっている状態で、しかもそこに
position: relative;がありまして。。。
飛び越えることが出来ませんでした。。。

解決策として、下記のように

<div class="wrap">
<div>
<a href="#popup-window">ポップアップを開く</a>
</div>
</div>
<div id="popup-window">
ほげほげ<br>
<a href="#">ポップアップを閉じる</a>
</div>

wrapから出して、JSで対応するという方向で作業を進めることにしました。

アドバイスありがとうございました！