https://www.nachmieter.ch/templates/realty_map/js/jquery.flModal.js?rev=4

1/**
2 * jQuery modal window plugin by Flynax 
3 *
4 */
5(function($){
6    $.flModal = function(el, options){
7        var base = this;
8        var lock = false;
9        var direct = false;
10        var fullscreen_mode = false;
11        
12        // access to jQuery and DOM versions of element
13        base.$el = $(el);
14        base.el = el;
15        
16        base.objHeight = 0;
17        base.objWidth = 0;
18        base.sourceContent = false;
19
20        // add a reverse reference to the DOM object
21        base.$el.data("flModal", base);
22
23        base.init = function(){
24            base.options = $.extend({},$.flModal.defaultOptions, options);
25
26            // initialize working object id
27            if ( $(base.el).attr('id') ) {
28                base.options.id = $(base.el).attr('id');
29            }
30            else {
31                $(base.el).attr('id', base.options.id);
32            }
33            
34            fullscreen_mode = false;
35
36            // add mask on click
37            if ( base.options.click ) {
38                base.$el.click(function(){
39                    base.mask();
40                    base.loadContent();
41                });
42            }
43            else {
44                base.mask();
45                base.loadContent();
46            }
47        };
48
49        base.mask = function() {
50            var dom = '<div id="modal_mask" class="w-100"><div id="modal_block" class="modal_block"></div></div>';
51            
52            $('body').append(dom);
53            
54            if ( media_query == 'mobile' ) {
55                base.options.width = base.options.height = '100%';
56            }
57
58            if ( base.options.fill_edge ) {
59                $('#modal_block').addClass('fill-edge');
60            }
61
62            if ( base.options.width == '100%' && base.options.height == '100%' ) {
63                fullscreen_mode = true;
64                $('body > *:visible:not(#modal_mask)').addClass('tmp-hidden').hide();
65                $('#modal_block').addClass('fullscreen');
66                $('#modal_mask').show();
67                var width = '100%';
68                var height = '100%';
69            }
70            else {
71                var width = $(document).width();
72                var height = $(document).height();
73            }
74
75            $('#modal_mask').width(width);
76            $('#modal_mask').height(height);
77            $('#modal_block').width(base.options.width).height(base.options.height);
78
79            if ( !fullscreen_mode ) {
80                // on resize
81                $(window).bind('resize', base.resize);
82            
83                // on scroll    
84                if ( base.options.scroll ) {
85                    $(window).bind('scroll', base.scroll);
86                }
87            }
88        };
89        
90        base.resize = function() {
91            if ( lock )
92                return;
93
94            var width = $(window).width();
95            var height = $(document).height();
96            $('#modal_mask').width(width);
97            $('#modal_mask').height(height);
98            
99            var margin = ($(window).height()/2)-base.objHeight + $(window).scrollTop();
100            $('#modal_block').stop().animate({marginTop: margin});
101            
102            var margin = base.objWidth * -1;
103            $('#modal_block').stop().animate({marginLeft: margin});
104        };
105        
106        base.scroll = function() {
107            if (lock || media_query == 'tablet')
108                return;
109
110            var margin = ($(window).height()/2)-base.objHeight + $(window).scrollTop();
111            $('#modal_block').stop().animate({marginTop: margin});
112        };
113        
114        base.loadContent = function() {
115            /* load main block source */
116            var dom = '<div class="inner"><div class="modal_content"></div><div class="close" title="'+lang['close']+'"><div></div></div></div>';
117            $('div#modal_block').html(dom);
118
119            /* load content */
120            var content = '';
121            var caption_class = base.options.type ? ' '+base.options.type : '';
122            base.options.caption = base.options.type && !base.options.caption ? lang[base.options.type] : base.options.caption;
123            
124            /* save source */
125            if ( base.options.source ) {
126                if ( $(base.options.source + ' > div.tmp-dom').length > 0 ) {
127                    base.sourceContent = $(base.options.source + ' > div.tmp-dom');
128                    direct = true;
129                }
130                else {
131                    base.sourceContent = $(base.options.source).html();
132                }
133            }
134            
135            /* build content */
136            content = base.options.caption ? '<div class="caption'+caption_class+'">'+ base.options.caption + '</div>': '';
137            content += base.options.content ? base.options.content : '';
138            
139            /* clear soruce objects to avoid id overload */
140            if ( base.options.source && !direct ) {
141                $(base.options.source).html('');
142                content += !base.options.content ? base.sourceContent : '';
143            }
144            
145            $('div#modal_block div.inner div.modal_content').html(content);
146            
147            if ( base.options.source && direct ) {
148                $('div#modal_block div.inner div.modal_content').append(base.sourceContent);
149            }
150            
151            if ( base.options.prompt ) {
152                var prompt = '<div class="prompt"><input name="ok" type="button" value="Ok" /> <a class="close" href="javascript:void(0)">'+lang['cancel']+'</a></div>';
153                $('div#modal_block div.inner div.modal_content').append(prompt);
154            }
155            
156            if ( base.options.ready ) {
157                base.options.ready();
158            }
159            
160            $('#modal_block input[name=close], #modal_block .close').click(function(){
161                base.closeWindow();
162            });
163            
164            if ( base.options.prompt ) {
165                $('#modal_block div.prompt input[name=close]').click(function(){
166                    base.closeWindow();
167                });
168                $('#modal_block div.prompt input[name=ok]').click(function(){
169                    var func = base.options.prompt;
170                    func += func.indexOf('(') < 0 ? '()' : '';
171                    eval(func);
172                    base.closeWindow();
173                });
174            }
175            
176            /* set initial sizes */
177            if ( !fullscreen_mode ) {
178                base.objHeight = $('#modal_block').height()/2;
179                base.objWidth = $('#modal_block').width()/2;
180                
181                var setTop = ($(window).height()/2) - base.objHeight + $(window).scrollTop();
182                $('#modal_block').css('marginTop', setTop);
183                var setLeft = base.objWidth * -1;
184                $('#modal_block').css('marginLeft', setLeft);
185            }
186            
187            $('#modal_mask').click(function(e){
188                if ( $(e.target).attr('id') == 'modal_mask' ) {
189                    base.closeWindow();
190                }
191            });
192            
193            $('#modal_block div.close').click(function(){
194                base.closeWindow();
195            });
196        };
197        
198        base.closeWindow = function() {
199            lock = true;
200            
201            $('#modal_block').animate({opacity: 0});
202            $('#modal_mask').animate({opacity: 0}, function(){
203                $(this).remove();
204                $('#modal_block').remove();
205                
206                if ( base.options.source ) {
207                    $(base.options.source).append(base.sourceContent);
208                }
209                
210                lock = false;

211            });
212
213            $(window).unbind('resize', base.resize);
214            $(window).unbind('scroll', base.scroll);
215
216            if ( fullscreen_mode ) {
217                $('body > *.tmp-hidden').show().removeClass('tmp-hidden');
218            }
219        };
220        
221        // run initializer
222        base.init();
223    };
224
225    $.flModal.defaultOptions = {
226        scroll: true,
227        type: false,
228        width: 340,
229        height: 230,
230        source: false,
231        content: false,
232        caption: false,
233        prompt: false,
234        click: true,
235        ready: false,
236        fill_edge: false
237    };
238
239    $.fn.flModal = function(options){
240        return this.each(function(){
241            (new $.flModal(this, options));
242        });
243    };
244
245})(jQuery);