html代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>单张图片模态框</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script src="js/jquery-3.2.0.min.js"></script> </head> <body> <div class="tuijianmenu-menu"> <div class="tuijianmenu-item"> <img src="images/01.jpg" alt="model test picture1" class="arealimg"> <!-- 图片模态框 --> <div class="motai" id="mo"> <span class="close" id="close">×</span> <img class="amotaiimg" src="motaiimg" id="moimg"> <div class="acaption" id="caption"></div> </div> </div> <div class="tuijianmenu-item"> <img src="images/02.jpg" alt="model test picture2" class="arealimg"> </div> <div class="tuijianmenu-item"> <img src="images/03.jpg" alt="model test picture3" class="arealimg"> </div> <div class="tuijianmenu-item"> <img src="images/04.jpg" alt="model test picture4" class="arealimg"> </div> </div> </body> </html>
js代码：
<script type="text/javascript"> $(document).ready(function(){ $('.tuijianmenu-item').click(function(e){ var imgsrc=$(this).children("img.arealimg").attr('src'); var imgalt=$(this).children("img.arealimg").attr('alt'); var currentDivId = $(" .motai").attr('id'); var currentCloseId=$(" .motai .close").attr("id"); var currentMoImgId=$(" .motai img").attr('id'); var currentCaptionId=$(" .motai div").attr('id'); var motai=document.getElementById(currentDivId); var moimg=document.getElementById(currentMoImgId); var caption=document.getElementById(currentCaptionId); motai.style.display="block"; moimg.src=imgsrc; caption.innerHTML=imgalt; var close=document.getElementById(currentCloseId); $('.motai .close').mousedown(function () { motai.style.display="none"; }); }); }); </script>
css代码：
/*推荐菜单*/ .tuijianmenu-menu{ width:100%; height:210px; margin:20px auto; } .tuijianmenu-item{ width:23%; margin:0 10px; float:left; height:200px; cursor:pointer; } .arealimg{ margin:0; width:100%; height:100%; border-radius:6px; } .arealimg:hover{ opacity:0.6; } .motai{ display:none; width:100%; height:100%; position:fixed; overflow:auto; background-color:rgba(0,0,0,0.7); top:0; left:0; z-index:600; } .amotaiimg{ display:block; margin:25px auto; width:50%; max-width:750px; } .acaption{ text-align:center; margin:15px auto; width:60%; max-height:750px; font-size:20px; color:#ccc; } .amotaiimg,.acaption{ -webkit-animation:first 1s; -o-animation:first 1s; animation:first 1s; } @keyframes first{ from{transform:scale(0.1);} to{transform:scale(1);} } .close{ font-size:40px; font-weight:bold; position:absolute; top:20px; right:14%; color:#f1f1f1; } .close:hover,.close:focus{ color:#bbb; cursor:pointer; } @media only screen and(max-750px){ #moimg{ width:100%; } } /*/推荐菜单*/
综上所述，就会有个漂亮的图片展示代码啦
点击：
