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 do I add extra slides to this pure CSS text rotator?

    How to abruptly stop a linear animated jQueryUI slider handle (crossbrowser)

    How to hide a segment of my website using PHP

    How to remove space above and below the in-line block elements?

    How to position element between two sections while also being responsive?

    How should I create a web interface for my application? [closed]

    How to use global variables in CSS-Modules?

    How to have a sidebar on the right in a responsive page with maximum width?

    css how to make H2 tag look same as H3 tag (turned out hard!)

    How to enable -webkit-animation/transition-property for :before and :after pseudo elements?

    How can I use CSS to set as my
  • background if I'm using the Zend framework?
  • Css - how hide third element td?

    How to refactor CSS based on HTML class

    How to scale down retina image sprite with css

    How to get bean property on css file?

    How can I get css pseudo element :checked to work in IE7 + IE8?

    How to use css in asp.net

    How can i center the list items inside my unordered list?

    How to resize grid-view column width?

    How can I refactor some repetitive HTML and CSS?

    how to select a input using jquery

    How do you override CSS applied by jQuery UI theme properly?

    How to animate a rotated DOM element with CSS

    How to vertically and horizontally centre text with a variating font size in CSS

    How to prevent artifacts from appearing in Webkit when scrolling the page after stopping CSS animations

    Does anybody know how I can adjust this CSS to achieve the desired hyperlink effect I'd like?

    SASS: normalize.css works, but does not show up in compiled CSS file?

    How to send HTML to an embedded WebView without running a local webserver?

    How to create a CSS shade effect with a faded sidebar

    How to correct checkbox position, when it is one the same page with jQuery UI input text?