Javascript jQuery／HTML/CSS使图像以不透明的背景出现在中间。_Javascript_Jquery_Html_Css

Javascript jQuery／HTML/CSS使图像以不透明的背景出现在中间。

javascript jquery html css

Javascript jQuery／HTML/CSS使图像以不透明的背景出现在中间。,javascript,jquery,html,css,Javascript,Jquery,Html,Css,大家好，我是使用html、css、javascript和jquery进行web编程的新手。我有以下代码： HTML: <!DOCTYPE html> <html lang="en"> <head> <title>My test Site</title> <meta charset="utf-8"> <link rel="stylesheet" href="cssTest.css"> <scr

大家好，我是使用html、css、javascript和jquery进行web编程的新手。我有以下代码：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My test Site</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="cssTest.css"> 
 <script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id = "divMain">
<div id="div1">
    <a href="#" title="Image1"><img src = "1.jpg" disabled="disabled"></a>  
    <a href="#" title="Image1"><img src = "2.jpg" disabled="disabled"></a>
    <a href="#" title="Image1"><img src = "3.jpg" disabled="disabled"></a>
</div> 
<div id="div2">
    <a href="#" title="Image1"><img src = "4.jpg" disabled="disabled"></a>
    <a href="#" title="Image1"><img src = "5.jpg" disabled="disabled"></a>    
</div>         
</div>
<div id="div3">
    <div class="myCanvas" width=100% height=100%; ></div>               
</div>    
</body>
</html>

CSS:

我试图做的是每当我点击一个图像，我想让图像出现在中间，一个不透明的背景，将覆盖其他图像。< /P>

谢谢各位的帮助，对NoOB问题表示歉意。它为您提供了所需的功能。

在这里您可以找到解决方案：

HTML

jQuery

jQuery(document).ready(function($){
    $("#privacy").click(function(){
        $("#privacyopen").fadeIn(); 
        $("#bgrprivacy").fadeIn();
        $("body").css("overflow", "hidden");
        /*$("header").css("z-index", "1");*/
    }); 
    $("#bgrprivacy").click(function(){
        $("#privacyopen").fadeOut();    
        $("#bgrprivacy").fadeOut();
        $("body").css("overflow", "auto");
        /*$("header").css("z-index", "1");*/
    });     
});

Ps：它包含一些你不需要的代码，因为我忘了删除它：我这样做是为了我的网站

body{
background-color: grey;
}

#div1,#div2{
    border:solid;
    border-color: red;
}

#div1 img{
position: relative;
border: solid;
border-color: blue;
margin:5px;
z-index:1;
}

#div2 img{
position: relative;
border: solid;
border-color: blue;
z-index:1;
}

#div3{
background-color:black;
position: relative;
position-align: center;
top:-500px;
z-index:2
}

.myCanvas{
position: relative;
background: solid;
background-color: grey;
opacity: 0.5;
width:100%;
height:100%;
display: block;
z-index:3;
}

<div id="privacy">OPEN ME</div>
<div id="bgrprivacy"></div>
<div id="privacyopen">
I'M OPEN!!
</div>

#privacy{
    text-decoration:none;
    color:#999;
    font-size:12px;
    cursor:pointer;
}
#privacyopen{
    display:none;
    background:white;
    height:30%;
    width:50%;
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index:101; 
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-x:hidden;
    padding:20px;
}
#bgrprivacy{
    display:none;
    background-color:rgba(0,0,0,0.4);
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index:100;
    width:100%;
    height:100%;
    cursor:pointer;
}

jQuery(document).ready(function($){
    $("#privacy").click(function(){
        $("#privacyopen").fadeIn(); 
        $("#bgrprivacy").fadeIn();
        $("body").css("overflow", "hidden");
        /*$("header").css("z-index", "1");*/
    }); 
    $("#bgrprivacy").click(function(){
        $("#privacyopen").fadeOut();    
        $("#bgrprivacy").fadeOut();
        $("body").css("overflow", "auto");
        /*$("header").css("z-index", "1");*/
    });     
});