;(function () { var doc = $(document); var docRoot = $('html'); var docBody = $('body'); var defaultOptions = {}; var TEMPL_UI = [ '<div class="pi-mask" style="display:none;">', '<div class="pi-x"></div> ', '<div class="pi-container"> ', ' <div class="hd"></div> ', ' <div class="bd"></div> ', '</div> ', '</div> '].join(''); var TEMPL_ANCHOR = '<div class="pi-anchor"></div>'; function Previewer() { this.init(); }; Previewer.prototype = { init: function () { var o = this; this.mask = $(TEMPL_UI).appendTo(docBody); this.anchor = $(TEMPL_ANCHOR).prependTo(docBody); this.container = this.mask.find('.pi-container'); this.header = this.mask.find('.pi-container > .hd'); this.body = this.mask.find('.pi-container > .bd'); doc.delegate('.pi-mask', 'click', function (e) { if (e.target == o.container[0] || $.contains(o.container[0], e.target)) { return; } o.close(); }); doc.bind('keyup', function (e) { if (!(/input|textarea/i.test(e.target.tagName)) && e.keyCode === 27) { o.close(); } }); }, open: function (options) { this.options = $.extend({}, defaultOptions, options || {}); var top = this.docTop = doc.scrollTop(); this.anchor.show().css({ marginTop: -top }); docRoot.addClass('pi-show'); this.mask.show(); this.setContent('<div class="pic"><img src="' + options.origin + '"></div>'); }, close: function () { docRoot.removeClass('pi-show'); this.anchor.hide(); doc.scrollTop(this.docTop); this.mask.hide(); }, setContent: function(content) { this.body.html(content); } }; if (!$.previewImage) { $.previewImage = new Previewer(); } })(); $(document).delegate('.pic-list a', 'click', function (e) { e.preventDefault(); $.previewImage.open($(this).data()); });
<div class="pic-list"> <ul> <li><a href="http://1.com" data-origin="http://dummyimage.com/300"><img src="http://dummyimage.com/100" alt="" /></a> <li><a href="http://2.com" data-origin="http://dummyimage.com/400"><img src="http://dummyimage.com/100" alt="" /></a> <li><a href="http://3.com" data-origin="http://dummyimage.com/500"><img src="http://dummyimage.com/100" alt="" /></a> <li><a href="http://4.com" data-origin="http://dummyimage.com/600"><img src="http://dummyimage.com/100" alt="" /></a> <li><a href="http://5.com" data-origin="http://dummyimage.com/300x700"><img src="http://dummyimage.com/100" alt="" /></a> <li><a href="http://6.com" data-origin="http://dummyimage.com/300"><img src="http://dummyimage.com/100" alt="" /></a> <li><a href="http://6.com" data-origin="http://dummyimage.com/300"><img src="http://dummyimage.com/100" alt="" /></a> <li><a href="http://6.com" data-origin="http://dummyimage.com/300"><img src="http://dummyimage.com/100" alt="" /></a> <li><a href="http://6.com" data-origin="http://dummyimage.com/300"><img src="http://dummyimage.com/100" alt="" /></a> </ul> </div>
.pi-show, .pi-show body { width: 100%; height: 100%; overflow: hidden; } .pi-show { overflow-y: auto; } .pi-mask { position: absolute; vertical-align: middle; top: 0; left: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; background: rgba(0, 0, 0, .2); text-align: center; white-space: nowrap; } .pi-x { display: inline-block; *display: inline; zoom: 1; width: 1px; height: 100%; margin-right: -.31em; *margin-right: -.43em; overflow: hidden; vertical-align: middle; } .pi-anchor { width: 100%; height: 0; font-size: 0; line-height: 0; overflow:hidden; } .pi-container { display: inline-block; *display: inline; zoom: 1; vertical-align: middle; margin: 20px auto; min-width: 20em; min-height: 20em; text-align: left; word-wrap: break-word; white-space: normal; background: #fff; border-radius: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, .2); } .pi-container .bd { padding: 20px; } body, ul { padding: 0; margin: 0; text-align: center; } .pic-list { display: inline-block; } li { margin: 10px; list-style: none; } .pic { padding: 40px; text-align: center; }