Всплывающие окна на jqModal

28.02.2014

Постоянно использую библиотеку jqModal для создания всплывающих окон, ну очень она мне нравится. Причем недавно был выпущен новый апдейт и разработку перевели в RC. Так вот, за 1 год практики на этой библиотеки был написан функционал для автоматического вызова всплывающих окон при создании ссылки/кнопки и без дальнейшего редактирования этого js кода:

Вызывается все функцией:

$(document).ready(function(){
	$('*[data-event="jqm"]').jqmEx();
})

Функция создания всплывающего окна:

$.fn.jqmEx = function( options ){
	if( !$(this).length ){
		return this;
	}
	
	$(this).each(function(){
		var _this = $(this);
		var name = _this.data('name');
		var script = "/ajax/form.php";
		$.each( _this.get(0).attributes, function( index, attr ){
			if( /^data\-param\-(.+)$/.test( attr.nodeName ) ){
				var key = attr.nodeName.match(/^data\-param\-(.+)$/)[1];
				if( script == "/ajax/form.php" ){
					script += '?';
				}else{
					script += '&';
				}
				
				script += key + '=' + _this.data('param-'+key);
			}
		});
		
		if( $('.'+name+'_frame').length > 0 ){
			return;
		}
		if( $('.button[data-name="'+name+'"]' ).attr('disabled') != 'disabled' ){
			$('body').find('.'+name+'_frame').remove();
			$('body').append('<div class="'+name+'_frame jqmWindow" style="width: 574px"></div>');
			
			$('.'+name+'_frame').jqm({trigger: '*[data-name="'+name+'"]', onLoad: function( hash ){ onLoadjqm( hash ); }, onHide: function(hash){ onHide( hash ); }, ajax: script });
		}
	});
	
	return this;
}

И функции обработчики событий открытия и закрытия окна:

function onLoadjqm( hash ){
	var name = hash.t.className.split(/[\s\!,\.\?]+/g).pop();
	
	$.each( $(hash.t).get(0).attributes, function( index, attr ){
		if( /^data\-autoload\-(.+)$/.test( attr.nodeName ) ){
			var key = attr.nodeName.match(/^data\-autoload\-(.+)$/)[1];
			if( $('.jqmWindow [name="'+key+'"]').is('select') ){
				$('select[name="'+key+'"]').find('#'+$(hash.t).data('autoload-'+key)).attr('selected', 'selected');
			}else if( $('.jqmWindow [name="'+key+'"]').is('input') ){
				$('input[name="'+key+'"]').val( $(hash.t).data('autoload-'+key) ).attr('readonly', 'readonly');
			}else{
				console.log('onLoadjqm: warning, not defined type');
			}
		}
	});
	
	if( $(hash.t).data('autohide') ){
		$(hash.w).data('autohide', $(hash.t).data('autohide'));
	}
	
	if( $(hash.t).data('scroll') ){
		if( $(hash.w).parent().hasClass('jqmWindowOut') ){
			$(hash.w).parent().show();
		}else{
			$(hash.w).wrap('<div class="jqmWindowOut"></div>');
		}
		$('body').css('overflow', 'hidden').css('paddingRight', '15px');
		
		$('.jqmWindowOut').on('click', function(e){
			$(this).find('.jqmClose').click();
		});
		
		$('.jqmWindowOut').find('.jqmWindow').on('click', function(e){
			e.stopPropagation();          
		});
	}
	
	hash.w.addClass('show').css({ 'margin-left': '-' + hash.w.width() / 2+'px', 'top': $(document).scrollTop() + ( $(window).height() - hash.w.height() ) / 2 + 'px', 'opacity': 1 });
	setTimeout( function(){ $('body').scrollTop(); }, 300 );
}

function onHide( hash ){
	if( $(hash.w).data('autohide') ){
		eval( $(hash.w).data('autohide') );
	}
	
	if( $(hash.t).data('scroll') ){
		$('.jqmWindowOut').hide();
		$('body').css('overflow', 'scroll').css('paddingRight', '0');
	}
	
	hash.w.css('opacity', 0).hide();
	hash.w.empty();
	hash.o.remove();
	hash.w.removeClass('show');
}

А также, функция ресайза на не тачевых устройствах:

$(window).resize(function(){
	$('html.bx-no-touch .jqmWindow.show').css('top', $(document).scrollTop() + ( $(window).height() - $('.jqmWindow.show').height() ) / 2 + 'px');
})

Далее, необходимо просто создать кнопочку, вот пример со всем функционалом:

<button class="test btn btn-primary btn-lg pull-top" data-event="jqm" data-id="17" data-autoload-NAME="Example auto name" data-autohide="location.reload()">Launch demo modal</button>

где, data-event=»jqm» — указание на то, что при клике будет вызван попап,

data-param-id=»17″ — id формы, которая будет загружена аяксом в попап ( смотреть событие загрузки ),

data-autoload-NAME=»Example auto name» — указывает, что в инпут с названием NAME будет вставлена надпись Example auto name,

data-autohide=»location.reload()» — событие закрытие окна, в данном случае перезагрузка страницы.

ЗЫ

Есть ньюанс создания форм — при создании, скрипт создает дополнительную div’ку в которую в дальнейшем будет загружена аяксом область формы, поэтому первым классом должен обязательно идти уникальный текстовый идентификатор попапа.

upd 14.04.14:

Немного изменился код вызова popup’ов, добавлена возможность вызова скроллируемых попапов, пример можно посмотреть тут

javascript, jquery