JavaScript 图片弹窗

本文我们为大家介绍如何使用 JavaScript 与 CSS 来创建图片弹窗。

图片素材:

HTML 代码:


img id=myImg src=img.jpg alt=文本描述信息 width=300 height=200>


div id=myModal class=modal>


span class=close 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)}
}

@keyframes zoom {
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 screen and (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;
}

在线演示

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
  1. 免费下载或者VIP会员资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
  2. 提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。
  3. 找不到素材资源介绍文章里的示例图片?
    对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
  4. 付款后无法显示下载地址或者无法查看内容?
    如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理
  5. 购买该资源后,可以退款吗?
    源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源

评论(0)

提示:请文明发言