HTML：
<!-- 点击这个按钮弹窗 -->
<button rel="./1.jpg">详情</button>JavaScript：
<script src="./jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//定义modal
var modal = (function(){
var $window = $(window);
var winWidthInit = 1366;//初始化浏览器视口宽度
var winheightInit = 637;//初始化浏览器视口高度
var $modal = $('<div class="modal"/>');//创建最外层标签modal
var $content = $('<div class="modal-content"/>'); //modal中的内容div
var $close = $('<div class="modal-close">X</div>'); //modal中关闭弹窗的按钮div
var keys = { 37: 1, 38: 1, 39: 1, 40: 1 };//定义上下左右按钮的键值在一个数组里
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
//阻止默认事件的方法
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
//阻止默认键的方法返回false
$modal.append($content,$close); //将内容与关闭按钮添加在modal中
$modal.css({
'z-index' : 1000,
'background' : 'rgba(0,0,0,.3)',
'position' : 'fixed',
'top' : 0,
'left' : 0,
'overflow' : 'scroll'
});//给modal初始化最基本的CSS样式
$close.on('click', function(e){
modal.close();
});//给关闭按钮添加点击事件
//立即执行函数返回对象赋值给modal
return {
//规定大小和位置的方法
center: function(obj,w,h) {
var widthRatio = $window.width() / winWidthInit; //定义缩放比例
var heightRatio = $window.height() / winheightInit;
$content.css({
'width' : w * widthRatio * heightRatio,
'height': h * heightRatio * widthRatio
});
//判断现在的content是否大于你定义的应有的宽高，是则控制不应超出范围
//否则按比例缩放
var left = Math.max($window.width() - $content.outerWidth(), 0) / 2;
var top = Math.max($window.height() - $content.outerHeight() , 0) / 2;
//outerwidth()方法包含padding与border，控制大小后定义content的位置
$modal.css({
width : $window.width(),
height : $window.height()
});
//使modal的宽高始终不变
$content.css({
'top' : top,
'left' : left
});
//content始终居中于modal
obj.css({
'width' : $content.width() - 20,
'height' : $content.height() - 20
});
//图片的大小控制
$close.css({
'top' : top + 10,
'left' : left + $content.outerWidth() - 40,
});
//关闭按钮始终位于左上角偏一点的地方
},
//打开方法
open: function(settings){
var $img = $('<img>');//创建一个图片
$content.html('正在加载图片...');//图片未加载成功显示文字
$img.on('load',function(){
$content.empty().append($img);
}).attr('src',settings.imgSrc);
//加载成功删除所有子节点挂载图片
$content.hide();
$modal.css({
width : $window.width(),
height : $window.height()
}).appendTo('body');
//设置modal的宽高为浏览器视口的宽高并将modal挂到body中
$content.css({
'width' : settings.width,
'height' : settings.height,
'box-shadow' : '5px 5px 10px #333',
'background' : 'white',
'position' : 'absolute',
'overflow' : 'hidden'
});
//设置内容的宽高为想要的宽高及基本的CSS样式
$img.css({
'display':'block',
'padding' : '10px'
});
//图片的display设置成block
$close.css({
'cursor' : 'pointer',
'position' : 'absolute',
'text-shadow' : '1px 1px 5px #fff'
})
//关闭按钮的样式
modal.center($img,settings.width,settings.height);//转而执行居中方法
$modal.fadeIn(); //jQuery动态效果不能少
$content.fadeIn();
$(window).on('resize',function(){
modal.center($img,settings.width,settings.height);
});
//浏览器窗口发生变化触发modal方法，为了传递参数，新创建一个匿名函数
//在函数内执行center方法
modal.disableScroll();//阻止页面滚动
},
//关闭方法
close: function(){
$content.fadeOut();//动态效果不能忘
$modal.fadeOut();
setTimeout(function(){
$content.empty();
$modal.detach();
},300);
//等待动态效果结束需要将弹窗彻底卸载
$(window).off('resize');//移除通过on()方法添加的事件处理程序
modal.enableScroll();//恢复页面滚动
}，
//阻止页面滚动的方法
disableScroll: function () {
$(window).on('DOMMouseScroll wheel mousewheel touchmove',preventDefault);
$(document).on('keydown',preventDefaultForScrollKeys);
$(document).on('mousewheel',preventDefault);
isDisabled = true;
},
//恢复页面滚动的方法
enableScroll: function () {
if (!isDisabled) return;
$(window).off('DOMMouseScroll wheel mousewheel touchmove',preventDefault);
$(document).off('keydown',preventDefaultForScrollKeys);
$(document).off('mousewheel',preventDefault);
isDisabled = false;
}
};
}());
//初始化立即执行
(function(){
var $src = $('button').attr('rel');//将图片信息存在$src中
$('button').on('click', function(e) {
modal.open({imgSrc:$src,width:600,height:330});
});
//点击button触发modal.open()传入settings对象输入你想要显示的图片和框的初始大小
//注意不要使width和height的值不超过1366,637
}())
</script>通过以上代码，一个简单的通过jQuery制作的弹窗小效果就出来了。用起来也非常的简单，只需要向函数里面传递一个对象就可以了，发挥想象它也可以被用到各种各样的地方，稍微改吧改吧可以让弹窗内容更丰富，一劳永逸。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
