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>
效果，点击按钮弹出如下遮罩层：
