[TOC] ## demo ``` <body> <a class="previewimg" href="" data-src="http://swipebox.csag.co/images/image-4.jpg"> <img width="100" src="http://swipebox.csag.co/images/image-4.jpg" alt=""> </a> <script> (function ($) { $.fn.previewImg = function (url) { event.preventDefault(); var href = url||this.data('src'); $("body").after('<div class="js-jquery-showimg">\n' + ' <div style=" position: absolute; top:50%; left:50%;width: 90%; transform:translate(-50%,-50%); z-index: 1000 !important; ">\n' + ' <img width="100%" src="'+href+'" alt="">\n' + ' </div>\n' + ' <div class="js-jquery-close-img" style=" position: fixed; top:0%; bottom:0%; left:0%; right:0%; width: 100%; background-color: rgba(0,0,0,0.8); z-index:999 !important; " ></div>\n' + ' </div>'); $(".js-jquery-close-img").on('click',function () { $('.js-jquery-showimg').hide(); }) } }(jQuery)); $(".previewimg").on("click",function () { //不传取 当前标签的data-src 属性 $(this).previewImg() //可以传入参数 // $(this).previewImg("https://img-blog.csdn.net/20160909170202446?imageView2/5/w/120/h/120") }) </script> ```