覆盖CSS+;Javascript
我开始在javascript和css。。。我想做一个简单的div,看起来像一个对话框,但我希望后面有一个黑屏和对话框模式,阻止用户单击div以外的地方。。我在谷歌上搜索过,但我正在学习,我想知道覆盖图缺少什么…有人能帮我吗 我的css:覆盖CSS+;Javascript,javascript,html,css,overlay,Javascript,Html,Css,Overlay,我开始在javascript和css。。。我想做一个简单的div,看起来像一个对话框,但我希望后面有一个黑屏和对话框模式,阻止用户单击div以外的地方。。我在谷歌上搜索过,但我正在学习,我想知道覆盖图缺少什么…有人能帮我吗 我的css: .insertscreen{ visibility: hidden; position: absolute; left: 25%; top: 25%; border:2px solid #0094ff; width: 50%; height: 50%; -w
.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);
}试试这个简单的例子 HTML: JS
我将您的CSS类插入到JSFIDLE中,并在后台创建了一个新的CSS类。看看吧。 你说你是Javascript新手,所以我没有包括JQuery或复杂的编码 HTML(3个分区): 忘了小提琴的链接
<div id="modal">
<div class="insertscreen">
<p class="close">Close this modal</p>
</div>
</div>
<div id="showmodal">SHOW MY MODAL</div>
* {
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);
}
$('#showmodal').click(function(){
$('#modal').show();
});
$('.close').click(function(){
$('#modal').hide();
});
<div> You can not select me!</div>
<div id="blockbg" class="freeze"></div>
<div id="messageboard" class="insertscreen">Test</div>
.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);
}