html点击按钮出现弹窗_前端开发实例：JavaScript 图片弹窗

今天给大家讲解，web前端开发实例：JavaScript 图片弹窗的代码实现。

具体代码如下：

HTML 代码：

<img id="myImg"src="img.jpg" alt="文本描述信息" width="300" height="200"> <div id="myModal" class="modal">     <span onclick="document.getElementById('myModal').style.display='none'">×span>     <img class="modal-content"id="img01">     <div id="caption">div>div>

CSS 代码：

/* 触发弹窗图片的样式 */#myImg {    border-radius: 5px;    cursor:pointer;    transition: 0.3s;} #myImg:hover {opacity: 0.7;} /* 弹窗背景 */.modal {    display: none; /* Hidden by default */    position: fixed; /* Stay in place */    z-index: 1; /* Sit on top */    padding-top: 100px; /* Location of the box */    left: 0;    top: 0;    width: 100%; /* Full width */    height: 100%; /* Full height */    overflow: auto; /* Enable scroll if needed */    background-color: rgb(0,0,0); /* Fallback color */    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */} /* 图片 */.modal-content {    margin: auto;    display: block;    width: 80%;    max-width: 700px;} /* 文本内容 */#caption {    margin: auto;    display:block;    width: 80%;    max-width: 700px;    text-align: center;    color:#ccc;    padding: 10px 0;    height: 150px;} /* 添加动画 */.modal-content, #caption {     -webkit-animation-name: zoom;    -webkit-animation-duration: 0.6s;    animation-name: zoom;    animation-duration: 0.6s;} @-webkit-keyframes zoom {    from {-webkit-transform:scale(0)}     to {-webkit-transform:scale(1)}} @keyframeszoom {    from {transform:scale(0)}     to {transform:scale(1)}} /* 关闭按钮 */.close {    position: absolute;    top: 15px;    right: 35px;    color:#f1f1f1;    font-size: 40px;    font-weight: bold;    transition: 0.3s;}.close:hover,.close:focus {    color: #bbb;    text-decoration: none;    cursor: pointer;} /* 小屏幕中图片宽度为 100% */@media only screenand (max-width: 700px){    .modal-content {        width: 100%;    }}

JavaScript 代码：

// 获取弹窗var modal = document.getElementById('myModal'); // 获取图片插入到弹窗 - 使用 "alt" 属性作为文本部分的内容var img = document.getElementById('myImg');var modalImg = document.getElementById("img01");var captionText = document.getElementById("caption");img.onclick = function(){    modal.style.display = "block";    modalImg.src = this.src;    captionText.innerHTML = this.alt;} // 获取  元素，设置关闭按钮var span = document.getElementsByClassName("close")[0]; // 当点击 (x), 关闭弹窗span.onclick = function() {   modal.style.display = "none";}

代码综合运行效果：

未点击时：

点击图片后：

以上web前端开发代码实例，你学会了吗？一起学习web前端开发技术，做一名不断进步的web前端开发程序员！

好文章，点在看❤️