https://wakarukaigo.jp/js/wkg_y/jquery.modal.js

1//      Pop Easy | jQuery Modal Plugin
2//      Version 1.0
3//      Created 2013 by Thomas Grauer
4///////////////////////////////////////////////////////////////////////////////////////
5//      Permission is hereby granted, free of charge, to any person obtaining
6//      a copy of this software and associated documentation files (the
7//      "Software"), to deal in the Software without restriction, including
8//      without limitation the rights to use, copy, modify, merge, publish,
9//      distribute, sublicense, and/or sell copies of the Software, and to
10//      permit persons to whom the Software is furnished to do so, subject to
11//      the following conditions:
12//
13//      The above copyright notice and this permission notice shall be
14//      included in all copies or substantial portions of the Software.
15//
16//      THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17//      EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18//      MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19//      NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20//      LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21//      OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22//      WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23///////////////////////////////////////////////////////////////////////////////////////
24
25(function($){
26
27    $.fn.modal= function(options){
28       
29        options = $.extend({
30            trigger: '.modalLink',
31            olay: 'div.overlay',
32            modals: 'div.modal',
33            animationEffect: 'fadeIn',
34            animationSpeed: 400,
35            moveModalSpeed: 'slow',
36            background: '000',
37            opacity: 0.8,
38            openOnLoad: false,
39            docClose: true,
40            closeByEscape: true,
41            moveOnScroll: true,
42            resizeWindow: true,
43            video:'',
44            videoClass:'video',
45            close:'.closeBtn'
46            
47        },options);
48       
49        var olay = $(options.olay);
50        var modals = $(options.modals);
51        var currentModal;
52        var isopen=false;
53       
54        if (options.animationEffect==='fadein'){options.animationEffect = 'fadeIn';}
55        if (options.animationEffect==='slidedown'){options.animationEffect = 'slideDown';}
56        
57        olay.css({opacity : 0});
58                
59        if(options.openOnLoad) {
60            openModal();
61        }else{
62            olay.hide();
63            modals.hide();
64        }
65        
66        $(options.trigger).bind('click', function(e){
67            e.preventDefault();
68            
69            if ($('.modalLink').length >1) {
70                getModal = $(this).attr('href');
71                currentModal = $(getModal);    
72            }else{
73                currentModal = $('.modal');
74            }
75            openModal();
76        });
77        
78        function openModal(){
79            $('.' + options.videoClass).attr('src',options.video);
80            modals.hide();
81            currentModal.css({
82                top:$(window).height() /2 - currentModal.outerHeight() /2 + $(window).scrollTop(),
83                left:$(window).width() /2 - currentModal.outerWidth() /2 + $(window).scrollLeft()
84            });
85                
86            if(isopen===false){
87                olay.css({opacity : options.opacity, backgroundColor: '#'+options.background});
88                olay[options.animationEffect](options.animationSpeed);
89                currentModal.delay(options.animationSpeed)[options.animationEffect](options.animationSpeed); 
90            }else{
91                currentModal.show();
92            }
93            
94            isopen=true;
95        }
96        
97        function moveModal(){
98            modals
99            .stop(true)
100            .animate({
101            top:$(window).height() /2 - modals.outerHeight() /2 + $(window).scrollTop(),
102            left:$(window).width() /2 - modals.outerWidth() /2 + $(window).scrollLeft()
103            },options.moveModalSpeed);
104        }
105        
106        function closeModal(){
107            $('.' + options.videoClass).attr('src',''); 
108            isopen=false;
109            modals.fadeOut(100, function(){
110                if (options.animationEffect === 'slideDown') {
111                    olay.slideUp();
112                }else if (options.animationEffect === 'fadeIn') {
113                    olay.fadeOut();
114                }
115            });
116            return false;
117        }
118        
119        if(options.docClose){
120            olay.bind('click', closeModal);
121        }
122        
123        $(options.close).bind('click', closeModal);
124        
125        if (options.closeByEscape) {
126            $(window).bind('keyup', function(e){

127                if(e.which === 27){
128                    closeModal();
129                }
130            });
131        }
132        
133        if (options.resizeWindow) {
134            $(window).bind('resize', moveModal);
135        }else{
136            return false;
137        }
138        
139        if (options.moveOnScroll) {
140            $(window).bind('scroll', moveModal);
141        }else{
142            return false;
143        }
144    };
145})(jQuery);