CODEWITHSUNDEEP
htmlcss
Dark1007
Dark1007

Reputation: 23

Placing div over button on click

I want to place a div over the button once the button is clicked like the image below:

https://i.sstatic.net/9PetZ.png

Any ideas on how to do this ?

Upvotes: 1

Views: 8153

Answers (2)

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

you can do that! Suppose you are having the button on the very bottom left of your page.

I will just show the basic, only the code for button and the div. Hope it helps.

css for that:

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

the HTML would be:

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

Now the jQuery should be something like: 

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

Upvotes: 0

gp.
gp.

Reputation: 8225

put the button and the div panel in a parent div. make the popup div absolute and hidden.

.parent-div{
   position:relative;
}

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

show the popup-div on btn click.

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

Upvotes: 2

Related Questions