Как привязаться к родительскому классу ArcticModal, если все родители это стандартные классы, которые выдает сам плагн?

Question

[Alice777]

На одной странице нужно два абсолютно разных по стилистике модальных окна. И вот столкнулся с проблемой. Например, на одной и той же странице у меня есть два модальных окна. У одного оверлей с прозрачностью 0,8, а у другого оверлей красного цвета. Оверлей выдается с таким классом: .arcticmodal-overlay, .arcticmodal-container, но это же стандартный класс.о(.И все его родители тоже с классами, которые выдает сам плагин. .А мне нужна привзязка к чему-то. К боди тоже нельзя привязаться. Как быть в такой ситуации?

Answer 1

[Pastaraje]

Не сложно, есть ряд возможностей, например, повесить в data тип вызываемого окна

<a href="#" data-modal="#default">Окно стандартного типа</a>
<a href="#" data-modal="#red" data-modal-type="red">Окно с красным фоном</a>

И скрипт

$('[data-modal]').click(function(){
		var modal = $(this).data('modal');
		var modalType = $(this).attr('data-modal-type');
		$(modal).arcticmodal({
			beforeOpen: function(data, el) {
				$('body').addClass('modalType-'+modalType)
			},
			afterClose: function(data, el) {
				$('body').removeClass('modalType-'+modalType)
			}
		});
		return false;
	});

Стандартное окно всегда будет давать класс undefined, прочие - назначенный.

Вариант второй, если без data.

<a href="#default">Окно стандартного типа</a>
<a href="#red">Окно с красным фоном</a>

$('.modalTrigger').click(function(){
		var modal = $(this).attr('href');
		$(modal).arcticmodal({
			beforeOpen: function(data, el) {
				if(modal === '#red') {
					$('body').addClass('red');
				}
			},
			afterClose: function(data, el) {
				$('body').removeClass('red');
			}
		});
		return false;
	});