图片弹框

用js实现图片弹框的特效。

效果展示
在这里插入图片描述

代码展示

html内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    </head>

<body>

    <img id="myImg" src="img/c_7.jpg" alt="文本内容" width="300" height="200">

<div class="modal" id="myModal">
    
    <span class="close" οnclick="document.getElementById('myModal').style.display='none'">&times;</span>
    
    <img class="modal-content" id="img">
        
        <div id="text"></div>
</div>
</body>

</html>

css内容

#myImg{
		        border-radius: 5px;
		        cursor:pointer;
		        transition:0.3s;
		    }
		    #myImg:hover{opacity:0.7;}
		    
		    .modal{
		        display:none;   
		        position: fixed;
		        z-index: 1;
		        padding-top:100px;
		        left:0;
		        top: 0;
		        width:100%;
		        height: 100%;
		        overflow: auto;
		        background-color: rgba(0,0,0,0.9);
		    }
		    /* 图片*/
		    .modal-content{
		        margin: auto;
		        display: block;
		        width:80%;
		        max-width: 700px;
		    }
		    /* 文本内容*/
		    #text{
		        margin: auto;
		        display: block;
		        width:80%;
		        max-width: 700px;
		        text-align:center;
		        color:#ccc;
		        padding:10px 0;
		        height: 150px;
		    }
			
		    .modal-content, #text { 
		    -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;
		}
		 
		
		@media only screen and (max-width: 700px){
		    .modal-content {
		        width: 100%;
		    }
		}

js内容

var modal = document.getElementById('myModal');
	 
	
	var img = document.getElementById('myImg');
	var modalImg = document.getElementById("img");
	var captionText = document.getElementById("text");
	img.onclick = function(){
	    modal.style.display = "block";
	    modalImg.src = this.src;
	    captionText.innerHTML = this.alt;
	}
	 
	
	var span = document.getElementsByClassName("close")[0];
	 
	
	span.onclick = function() { 
	  modal.style.display = "none";
	}

了解更多关注我哟！！！

一页北城’

发布了259 篇原创文章 · 获赞 88 · 访问量 8479

私信关注

用js实现图片弹框的特效。

猜你喜欢