学习笔记1--用jQuery制作简单的弹窗（可复用）

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制作的弹窗小效果就出来了。用起来也非常的简单，只需要向函数里面传递一个对象就可以了，发挥想象它也可以被用到各种各样的地方，稍微改吧改吧可以让弹窗内容更丰富，一劳永逸。