弹出图片遮罩层

　　1，CSS

  1 /* 触发弹窗图片的样式 */
  2 #researchImg {
  3     border-radius: 5px;
  4     cursor: pointer;
  5     transition: 0.3s;
  6 }
  7 
  8     #researchImg:hover {
  9         opacity: 0.7;
 10     }
 11 
 12 
 13 /* 弹窗背景 */
 14 .modal {
 15     display: none; /* Hidden by default */
 16     position: fixed; /* Stay in place */
 17     z-index: 1; /* Sit on top */
 18     padding-top: 100px; /* Location of the box */
 19     left: 0;
 20     top: 0;
 21      100%; /* Full width */
 22     height: 100%; /* Full height */
 23     /*overflow: auto;*/ /* Enable scroll if needed */
 24     background-color: rgb(0,0,0); /* Fallback color */
 25     background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
 26     /*display: none;*/
 27     position: fixed;
 28     z-index: 99999;
 29     padding-top: 100px;
 30     /*left: 30%;
 31     top: 20%;
 32      40%;
 33     height: 60%;*/
 34     /* overflow: auto; */
 35     /*background-color: rgb(0,0,0);*/
 36     background-color: rgba(0,0,0,0.6);
 37 }
 38 /* 图片 */
 39 .modal-content {
 40     margin: auto;
 41     display: block;
 42      80%;
 43     max- 700px;
 44 }
 45 
 46 /* 文本内容 */
 47 #caption {
 48     margin: auto;
 49     display: block;
 50      80%;
 51     max- 700px;
 52     text-align: center;
 53     color: #ccc;
 54     padding: 10px 0;
 55     height: 150px;
 56 }
 57 
 58 /* 添加动画 */
 59 .modal-content, #caption {
 60     -webkit-animation-name: zoom;
 61     -webkit-animation-duration: 0.6s;
 62     animation-name: zoom;
 63     animation-duration: 0.6s;
 64 }
 65 
 66 
 67 /* 关闭按钮 */
 68 .close {
 69     /*position: absolute;
 70     top: 15px;
 71     right: 35px;
 72     color: #f1f1f1;
 73     font-size: 40px;
 74     font-weight: bold;
 75     transition: 0.3s;*/
 76     position: absolute;
 77     top: 56px;
 78     right: 420px;
 79     color: #f1f1f1;
 80     font-size: 40px;
 81     font-weight: bold;
 82     transition: 0.3s;
 83 }
 84 
 85     .close:hover,
 86     .close:focus {
 87         color: #bbb;
 88         text-decoration: none;
 89         cursor: pointer;
 90     }
 91 
 92 #allowance {
 93     position: fixed;
 94     right: 0px;
 95     top: 40%;
 96      30px;
 97     text-align: center;
 98     /*border: 1px solid red;*/
 99     color: white;
100     z-index: 1;
101     height: 198px;
102     /*background: url(/Images/welfareV.png) no-repeat;*/
103     background-size: contain;
104 }
105 
106     #allowance:hover {
107     }
108 
109 .allowance {
110      46%;
111     height: 94%;
112     cursor: pointer;
113     position: absolute;
114     right: 0;
115     top: -5px;
116 }
117 
118 .tip-foot {
119     text-align: right;
120 }

　　2，HTML

 1 <!-- 触发弹窗 - 图片改为你的图片地址 -->
 2 <img id="starImg" src="/Images/star.png" alt="文本描述信息" width="300" height="200">
 3 @*弹窗*@
 4 <div id="starModal" class="modal" style="display: none">
 5     <!-- 关闭按钮 -->
 6     <span class="close" onclick="document.getElementById('starModal').style.display = 'none'">
 7         <img id="closeImg" src="/Images/closeImg.png" style="margin-left: -205px;">
 8         @*弹窗*@
 9     </span>
10     <!-- 弹窗内容 -->
11     <img class="modal-content" id="img01" style="height: 550px; 350px">
12     <!-- 文本描述 -->
13     <a href="http://www.td365.com.cn/Funcontrast" target="_blank" style="margin-left: 48%;margin-top: -30px;position: absolute; color: #fff;font-size:medium;border-bottom: solid;">
14         版本对比
15     </a>
16     <div id="caption"><img src="~/Images/starBtn.png" /></div>
17 </div>
18 
19 
20 
21 
22             <a onclick="showStar()" style="color: #000;font-family: 宋体;">
23                 星耀版
24                 <div style="-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);margin-top: -56px;margin-left: 62px;color: red;height: 0px; 25px;font-size: x-small;">体验</div>
25             </a>

　　3，JS

 1 <script>
 2     ////隐藏领取福利图片
 3     var img = document.getElementById('starImg');
 4     img.style.display = "none";
 5 
 6     //显示弹出框
 7     function showStar() {
 8         // 获取弹窗
 9         var modal = document.getElementById('starModal');
10 
11         // 获取图片插入到弹窗 - 使用 "alt" 属性作为文本部分的内容
12         var img = document.getElementById('starImg');
13         var modalImg = document.getElementById("img01");
14 
15         modal.style.display = "block";
16         modalImg.src = img.src;
17 
18         // 获取 <span> 元素，设置关闭按钮
19         var span = document.getElementsByClassName("close")[0];
20 
21         // 当点击 (x), 关闭弹窗
22         span.onclick = function () {
23             modal.style.display = "none";
24         }
25     }
26 </script>

　　效果，点击按钮弹出如下遮罩层：