html - クリック時にボタンの上にdivを配置する

Question

下の画像のようにボタンがクリックされたら、ボタンの上にdivを配置したい：

http://i.imgur.com/pdrqnmj.png

これを行う方法についてのアイデアはありますか?

Answer 1

出来るよ！ページの左下にボタンがあるとします。

ボタンと div の基本的なコードのみを示します。それが役に立てば幸い。

そのためのCSS：

.button, .div {
position: absolute;
bottm: 0;
left: 0;
}
.div {
display: none; // to make it hidden.
}

HTML は次のようになります。

<button class="button">I am button</button>
<div class="div">I am on the button!</div>

jQuery は次のようになります。

$(document)ready(function() {
  $(".button")click(function() {
    $(".div").show();
  })
})

Answer 2

ボタンと div パネルを親 div に配置します。ポップアップ div を絶対にして非表示にします。

.parent-div{
   position:relative;
}

.popup-div{
   position:absolute;top:0px;left:0px;
   z-index:10;
   display:none;
}

btn クリックで popup-div を表示します。

$(".btn").on("click", function(){
   $(".popup-div").show();
});