CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2061217
user2061217

Reputation:

CSS overlay div does not display correctly

I need to display div after clicking button over the content. Button that causes displaying dev is not at the top of the page (you have to scroll down). But overlay div displays wrong, like on the picture. How can I modify the code to display the overlay div always in the middle of the page.

enter image description here

HTML:

 <div id="rating_overlay"></div>
<div id="rating_content">
    <div class="overlay_exit">
        <a href="javascript:void(0)" onmousedown="toggleOverlay()" title="Zavřít">
            <i class="fa fa-times fa-2x"></i>
        </a>
    </div>
    <h2>Přidat hodnocení</h2>
    <div id="profil_add_rating">
       <!-- Content -->
    </div>
</div>
<div id="rating_wrapper"></div>
<script type="text/javascript">
    function toggleOverlay() {
        var overlay = document.getElementById('rating_overlay');
        var specialBox = document.getElementById('rating_content');
        overlay.style.opacity = .8;
        if (overlay.style.display == "block") {
            overlay.style.display = "none";
            specialBox.style.display = "none";
        } else {
            overlay.style.display = "block";
            specialBox.style.display = "block";
        }
    }
</script>

CSS:

 #rating_overlay {
    display: none;
    z-index: 2;
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    text-align: center;
}
#rating_content {
    display: none;
    position: relative;
    z-index: 3;
    padding: 16px;
    margin: 150px auto 0px auto;
    width: 500px; 
    height: 260px;
    background: #FFF;   
    text-align: left;
}

#rating_wrapper {
    position:absolute;
    top: 0px;
    left: 0px;
    padding-left:24px;
}

EDIT: The solution with position: fixed works, but I will use http://drublic.github.io/css-modal/.

Upvotes: 0

Views: 2266

Answers (2)

jave.web
jave.web

Reputation: 15032

CSS' position: fixed; is your friend

Position fixed says "put this element in the absolute position according to the window"

CSS for "always on top & center(horizontaly) could be:

#rating_wrapper{
  position: fixed;
  top: 0;
  left: 50%;
  width: 200px;
  margin-left: -100px;
}

EDIT: jsfiddle showcase: http://jsfiddle.net/m4Fbk/

CZ: fixni pozice je popsana i na jakpsatwebu ;) http://www.jakpsatweb.cz/css/position.html

Upvotes: 1

dfsq
dfsq

Reputation: 193261

You should use position: fixed for your content div instead of relative and correct position with top-left+margin values:

#rating_content {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -130px 0 0 -250px;
    width: 500px; 
    height: 260px;
    ...
}

Demo: http://jsfiddle.net/sRrBL/

Upvotes: 0

Related Questions