CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Atma
Atma

Reputation: 29767

how to show div overlay in place clicked, not at top of the screen in html

I have the following css and js:

<style type="text/css">
#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}
</style>
<script>
function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>

I have the following HTML:

<table>
    <tr>
        <td> Click button</td>
        <td><a href='#' onclick='overlay()'>Click here to show the overlay</a></td>
    </tr>
</table>

The problem is that when I click this, the page scrolls back to the top and shows the the dialog.

I would like the overlay to show right in place. How can I achieve this?

Upvotes: 0

Views: 1488

Answers (1)

taxicala
taxicala

Reputation: 21759

Use position fixed and use percentage to show it:

#overlay {
     visibility: hidden;
     position: fixed;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

And as per the scrolling, you can return false in your function:

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
    return false;
}

Upvotes: 3

Related Questions