<body> <a href="#" id="tanchuan1" onclick="sc()">点击显示图片</a> <div class="add-img" id="tanchuang2" style="display: none;"> <div class="add-rim"> <a id="add-close" href="javascript:closeDiv()">x</a> <img src="../css/图片/ImageRevealHover-master/img/1.jpg"> </div> </div> </body> /* 遮罩层 */ .add-img { width: 100%; height: 100%; background-color: rgb(0 0 0 / 21%); position: fixed; top: 0; bottom: 0; left: 0; right: 0; } /* 弹窗内容 */ .add-rim { width: 600px; height: 300px; background-color: whitesmoke; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; /* 居中 */ } /* 关闭按钮 */ #add-close { position: absolute; right: 0; top: 0; font-size: 33px; color: #bbbbbb; margin-top: -15px; text-decoration: none; } </style> <script> // 点击显示图片 function sc(){ document.getElementById('tanchuang2').style.display="block"; } // 关闭按钮 function closeDiv(){ //当调用closeDiv函数时候，执行获取ID名为tanchuang2的标签 把它的style样式改为隐藏， document.getElementById('tanchuang2').style.display='none'; } </script>
本文来源：时光荏苒
本文地址：https://www.focusonseo.cn/js/45.html
文章声明：以上内容(如有图片或视频亦包括在内)除非注明，否则均为时光荏苒原创文章，转载或复制请以超链接形式并注明出处。