Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0
}
html,body {
	height:100%
}
body {
	width:100%
}
button {
	margin:50px 0px 0px 50%;
	width:100px;
	height:30px;
	border-radius:5px;
	background:linear-gradient(to left,#0054ff,#00e4ff);
	color:aliceblue;
	cursor:pointer
}
#imgLayer {
	display:none;
	z-index:5;
	position:fixed;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.6);
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
}
#imgBoxl {
	display:none;
	height:100%;
	z-index:6;
	position:fixed;
	margin:5%;
}
#bigimg {
	position:fixed;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
}
ul ol {
	margin:20px
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

无需任何插件html+css+js实现图片弹窗(原创)

页面样式就懒得写了,重点的功能,注释写的比较多,主要方便给新手查看

鼠标左右键可切换图片键盘左右键可切换图片点击空白区域关闭图片打开图库按钮可自行修改内容和样式如需添加图片只需要给js中的“imgurl”数组添加内容即可

0