How to create a backdrop for a dialog?


Tags: javascript,html,css

Problem :

I created a dialog:

<div id="dialog">
    <div id="start_conditions_scroll">
        <p>Conditions</p>
        My Conditions
    </div>
    <button id="close" class="button" onclick="dialog()">Close</button>
</div>

The css:

#dialog {
    background: white;
    position: absolute;
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 1000;
    visibility: hidden;
}

The javascript:

$(document).ready(function () {
    showStart();

    document.querySelector("#show").onclick = function () {
        dialog();
    };

    document.querySelector("#show_2").onclick = function () {
        dialog();
    };
});

function dialog() {
    element = document.getElementById("dialog");
    element.style.visibility = (element.style.visibility == "visible") ? "hidden" : "visible";
}

How can I create a backdrop for that dialog? I want to create something like an overlay over the background.



Solution :

If you wrap your #dialog div in a container div you could do something like this:

HTML

<div id="dialog-container">
    <div id="dialog">
        <div id="start_conditions_scroll">
            <p>Conditions</p>My Conditions</div>
        <button id="close" class="button" onclick="dialog()">Close</button>
    </div>
</div>

CSS

#dialog-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    visibility: hidden;
}
#dialog-container:before {
    content:"";
    background: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}
#dialog {
    background: white;
    position: absolute;
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 1000;

}

See this Fiddle for a demo.

The #dialog-container:before is creating you backdrop in this demo.


    CSS Howto..

    How to apply transition on div movement when upper disappears?

    How do you spin side to side using css3 animation?

    How to correctly override default JavaFX 8 CSS on TableView

    How do I get this menu to stay top right of the image on hover? - CSS, jQuery

    How to set select box height in jquery moblie?

    CSS, a Fixed Position Div with Dynamic Content - How to Position Another Div Underneath it?

    css how to fix layout in table

    How to let Materialize use classes for dropdowns and not ID's?

    How to position bottom of div above top of its container

    How to adjust the top of an image and an input in the same line?

    How do I make entire div a link? [duplicate]

    Jquery button click to show div right to left with slide animation

    How to change this script into

    How can i use ng-class variable from controller?

    How can I use css files in django?

    How do I center a table?

    How do I style all anchor tags inside a certain div?

    How to get the type word inside the input field once after pressing the Comma key and not after pressing space bar

    How to style diff implementation for PHP with CSS

    How can you grab elements in dom and apply different css without id?

    How to Extend Wrapped Elements to the Full Browser Width Using CSS?

    How to make outer columns same height with nested bootstrap grids

    How do I move a list's bullet point to the right side of the text?

    How to make a photo collage using html and css? [closed]

    How to design a Sass animation library that allows users to modify variables?

    How can i get spaces between images with the same class?

    Should I turn these images into a sprite, and if so, how would I do so? (picture included)

    How to style div's so that they don't stack right on top of each other?

    How to apply CSS styling to elements created by jquery's append()?

    How can I make dynamic progress bar using just jquery?