CODEWITHSUNDEEP
javascripthtmlcssoverlay
Rafael Spessotto
Rafael Spessotto

Reputation: 161

Overlay CSS + Javascript

Im starting in javascript and css... I want to do a simple div, appearing like a dialog, but i want that black screen behind, and the dialog modal, blocking the user to click somewhere not in div.. Ive searched in google, but im studing, and i want to know what is missing to the overlay...Someone could help me?

my css:

.insertscreen{
visibility: hidden;
position: absolute;
left: 25%;
top: 25%;

border:2px solid #0094ff;
width: 50%;
height: 50%;

-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;
font-size:12pt; /* or whatever */
background: -webkit-linear-gradient(top,#ffffff 0,#F2F2F2 100%);
background: -moz-linear-gradient(top,#ffffff 0,#F2F2F2 100%);
background: -o-linear-gradient(top,#ffffff 0,#F2F2F2 100%);
background: linear-gradient(to bottom,#ffffff 0,#F2F2F2 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#F2F2F2,GradientType=0);

}

Upvotes: 0

Views: 6129

Answers (2)

Sebastian Weiß
Sebastian Weiß

Reputation: 359

I inserted your CSS Class into a JSFiddle and made a new one for the background. Just have a look. You said you were new to Javascript, so i included no JQuery or complex coding.

HTML ( 3 DIVs ) :

<div> You can not select me!</div>
<div id="blockbg" class="freeze"></div>
<div id="messageboard" class="insertscreen">Test</div>

CSS (Your CSS Class plus the new one) :

.freeze {
    visibility: show;
    opacity: 0.5;
    top: 0;
    left: 0;
    background-color: grey;
    position: absolute;
    min-width: 100%;
    min-height: 100%
}
.insertscreen {
    visibility: show;
    position: absolute;
    left: 25%;
    top: 25%;
    border:2px solid #0094ff;
    width: 50%;
    height: 50%;
    -webkit-border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topleft:6px;
    -moz-border-radius-topright:6px;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    font-size:12pt;
    /* or whatever */
    background: -webkit-linear-gradient(top, #ffffff 0, #F2F2F2 100%);
    background: -moz-linear-gradient(top, #ffffff 0, #F2F2F2 100%);
    background: -o-linear-gradient(top, #ffffff 0, #F2F2F2 100%);
    background: linear-gradient(to bottom, #ffffff 0, #F2F2F2 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#F2F2F2, GradientType=0);
}

Forgot the Fiddle-Link ... LINK

Upvotes: 0

H&#233;ctor
H&#233;ctor

Reputation: 509

Try with this simple example, http://jsfiddle.net/x9dgwus7/.

HTML:

<div id="modal">
    <div class="insertscreen">
        <p class="close">Close this modal</p>
    </div>
</div>
<div id="showmodal">SHOW MY MODAL</div>

CSS

* { 
    padding: 0; margin: 0; 
}

html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0, 0, 0, 0.5);
}
#modal .insertscreen{
    position:relative;
left: 25%;
top: 25%;

border:2px solid #0094ff;
width: 50%;
height: 50%;

-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;
font-size:12pt; /* or whatever */
background: -webkit-linear-gradient(top,#ffffff 0,#F2F2F2 100%);
background: -moz-linear-gradient(top,#ffffff 0,#F2F2F2 100%);
background: -o-linear-gradient(top,#ffffff 0,#F2F2F2 100%);
background: linear-gradient(to bottom,#ffffff 0,#F2F2F2 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#F2F2F2,GradientType=0);  
}

JS

$('#showmodal').click(function(){
    $('#modal').show();
});
$('.close').click(function(){
    $('#modal').hide();
});

Upvotes: 2

Related Questions