overflow:auto;を指定したエリア(以下box1と呼ぶ)
の中にあるボタンをクリックすると、box1のフレーム内で
ポップアップが展開されると思いますが、box1のフレーム外、
box1よりも上位のレイヤーで表示させるにはどうしたらよいでしょうか。
どなたかご教授お願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
コメントと重複してしまい申し訳ありません。
コメントは編集削除できないのですね・・・。
私の説明不足がありまして、こちらの状況は、
<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で対応するという方向で作業を進めることにしました。
アドバイスありがとうございました。
投稿2015/03/02 08:32
退会済みユーザー
総合スコア0
0
どうしてもHTML+CSSで表現したいなら、制限はかなり付きますがtarget擬似クラスを使えばできると思います。
これなら要素の階層構造に関係なくポップアップを実現できます。
まずHTML側から......ポップアップ要素にはid属性を付けます。
ボタン側はa要素で実装し、href属性にポップアップで表示させたい要素のidを入力します。
lang
1<div> 2 <a href="#popup-window">ポップアップを開く</a> 3</div> 4<div id="popup-window"> 5 ほげほげ<br> 6 <a href="#">ポップアップを閉じる</a> 7</div>
CSS側は#popup-windowにdisplay: none;を適用し、非表示にします。
そしてtarget擬似クラスに対してdisplay: block;を設定します。
lang
1#popup-window { 2 display: none; 3 /* 他に装飾的要素を入れて下さい。 */ 4} 5#popup-window:target { 6 display: block; 7}
ただし、長文記事などの縦に長いサイトだと、リンクを押してポップアップを出したり閉じたりするたびにあっちこっちに飛んでしまいます......イライラすることこの上ないので使い物になるかは分かりません。
お手軽にポップアップを実現させたいなら、javascriptを利用することをおすすめします。
投稿2015/02/25 08:44
総合スコア58
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。