Регистрация
Вход через соцсети
Восстановление пароля

Модальное окно

Новый топик
14.02.2013, 17:45
Ответить | Цитировать
Артур
Артур Согомонян

Зарегистрирован:
2013-01-09
Сообщений: 12

Помогите с реализацией модального окна при добавлении товара в корзину для 5 - ой версии, где можно почитать или посмотреть, может кодом кто одарит?
Заранее благодарен за помощь.
19.02.2013, 17:33
Ответить | Цитировать
Артур
Артур Согомонян

Зарегистрирован:
2013-01-09
Сообщений: 12

Никто не ответил, решил поделиться своей реализацией модального окна при добавлении товара в корзину для 5 - ой версии.
Может кому-нибудь понадобится.
Большое Спасибо Евгению Фомину за помощь.
Подключаем скрипт:
Код:
 /* Модальное окно для Товара */
(function($) {


var default_options = {

type: 'html', // ajax или html
content: '',
url: '',
ajax: {},
ajax_request: null,

closeOnEsc: true,
closeOnOverlayClick: true,

clone: false,

overlay: {
block: undefined,
tpl: '<div class="arct-overlay"></div>',
css: {
backgroundColor: '#555555',
opacity: .6
}
},

container: {
block: undefined,
tpl: '<div class="arct-container"><table class="arct-container_i"><tr><td class="arct-container_i2"></td></tr></table></div>'
},

wrap: undefined,
body: undefined,

openEffect: {
type: 'fade',
speed: 400
},
closeEffect: {
type: 'fade',
speed: 400
},

beforeOpen: $.noop,
afterOpen: $.noop,
beforeClose: $.noop,
afterClose: $.noop,
afterLoading: $.noop,
afterLoadingOnShow: $.noop,
errorLoading: $.noop

};


var modalID = 0;
var modals = $();


var utils = {


// Определяет произошло ли событие e вне блока block
isEventOut: function(blocks, e) {
var r = true;
$(blocks).each(function() {
if ($(e.target).get(0)==$(this).get(0)) r = false;
if ($(e.target).closest('HTML', $(this).get(0)).length==0) r = false;
});
return r;
}


};


var modal = {


// Переход
transition: function(el, action, options, callback) {
callback = callback==undefined ? $.noop : callback;
switch (options.type) {
case 'fade':
action=='show' ? el.fadeIn(options.speed, callback) : el.fadeOut(options.speed, callback);
break;
case 'none':
action=='show' ? el.show() : el.hide();
callback();
break;
}
},


// Подготвка содержимого окна
prepare_body: function(D, $this) {

// Обработчик закрытия
$('.modalcl', D.body).click(function() {
$this.arct('close');
return false;
});

},


// Инициализация элемента
init_el: function($this, options) {
var D = $this.data('arct');
if (D) return;

D = options;
modalID++;
D.modalID = modalID;

// Overlay
D.overlay.block = $(D.overlay.tpl);
D.overlay.block.css(D.overlay.css);

// Container
D.container.block = $(D.container.tpl);

// BODY
D.body = $('.arct-container_i2', D.container.block);
if (options.clone) {
D.body.html($this.clone(true));
} else {
$this.before('<div id="arctReserve' + D.modalID + '" style="display: none" />');
D.body.html($this);
}

// Подготовка содержимого
modal.prepare_body(D, $this);

// Закрытие при клике на overlay
if (D.closeOnOverlayClick)
D.overlay.block.add(D.container.block).click(function(e) {
if (utils.isEventOut($('>*', D.body), e))
$this.arct('close');
});

// Запомним настройки
$this.data('arct', D);
modals = modals.add($this);

// Показать
$.proxy(actions.show, $this)();
if (D.type=='html') return $this;

// Ajax-загрузка
if (D.ajax.beforeSend!=undefined) {
var fn_beforeSend = D.ajax.beforeSend;
delete D.ajax.beforeSend;
}
if (D.ajax.success!=undefined) {
var fn_success = D.ajax.success;
delete D.ajax.success;
}
if (D.ajax.error!=undefined) {
var fn_error = D.ajax.error;
delete D.ajax.error;
}
var o = $.extend(true, {
url: D.url,
success: function(responce) {

// Событие после загрузки до показа содержимого
$this.trigger('afterLoading');
D.afterLoading(D, $this, responce);

if (fn_success==undefined) {
D.body.html(responce);
} else {
fn_success(D, $this, responce);
}
modal.prepare_body(D, $this);

// Событие после загрузки после отображения содержимого
$this.trigger('afterLoadingOnShow');
D.afterLoadingOnShow(D, $this, responce);

},
}, D.ajax);
D.ajax_request = $.ajax(o);

// Запомнить настройки
$this.data('arct', D);

},


// Инициализация
init: function(options) {
options = $.extend(true, {}, default_options, options);
if ($.isFunction(this)) {
if (options==undefined) {
$.error('jquery.arct: Uncorrect parameters');
return;
}
if (options.type=='') {
$.error('jquery.arct: Don\'t set parameter "type"');
return;
}
switch (options.type) {
case 'html':
if (options.content=='') {
$.error('jquery.arct: Don\'t set parameter "content"');
return
}
var c = options.content;
options.content = '';

return modal.init_el($(c), options);
break;
case 'ajax':
if (options.url=='') {
$.error('jquery.arct: Don\'t set parameter "url"');
return;
}
return modal.init_el($('<div />'), options);
break;
}
} else {
return this.each(function() {
modal.init_el($(this), options);
});
}
}


};


var actions = {


// Показать
show: function() {
var $this = $(this);
var D = $this.data('arct');
if (!D) {
$.error('jquery.arct: Uncorrect call');
return;
}

// Добавить overlay и container
D.overlay.block.hide();
D.container.block.hide();
$('BODY').append(D.overlay.block);
$('BODY').append(D.container.block);

// Событие
D.beforeOpen(D, $this);
$this.trigger('beforeOpen');

// Wrap
if (D.wrap.css('overflow')!='hidden') {
D.wrap.data('arctOverflow', D.wrap.css('overflow'));
var w1 = D.wrap.outerWidth(true);
D.wrap.css('overflow', 'hidden');
var w2 = D.wrap.outerWidth(true);
if (w2!=w1)
D.wrap.css('marginRight', (w2 - w1) + 'px');
}

// Скрыть предыдущие оверлеи
modals.not($this).each(function() {
var d = $(this).data('arct');
d.overlay.block.hide();
});

// Показать
modal.transition(D.overlay.block, 'show', modals.length>1 ? {type: 'none'} : D.openEffect);
modal.transition(D.container.block, 'show', modals.length>1 ? {type: 'none'} : D.openEffect, function() {
D.afterOpen(D, $this);
$this.trigger('afterOpen');
});

return $this;
},


// Закрыть
close: function() {
if ($.isFunction(this)) {
modals.each(function() {
$(this).arct('close');
});
} else {
return this.each(function() {
var $this = $(this);
var D = $this.data('arct');
if (!D) {
$.error('jquery.arct: Uncorrect call');
return;
}

// Событие перед закрытием
if (D.beforeClose(D, $this)===false) return;
$this.trigger('beforeClose');

// Показать предыдущие оверлеи
modals.not($this).last().each(function() {
var d = $(this).data('arct');
d.overlay.block.show();
});

modal.transition(D.overlay.block, 'hide', modals.length>1 ? {type: 'none'} : D.closeEffect);
modal.transition(D.container.block, 'hide', modals.length>1 ? {type: 'none'} : D.closeEffect, function() {

// Событие после закрытия
D.afterClose(D, $this);
$this.trigger('afterClose');

// Если не клонировали - вернём на место
if (!D.clone)
$('#arctReserve' + D.modalID).replaceWith(D.body.find('>*'));

D.overlay.block.remove();
D.container.block.remove();
$this.data('arct', null);
if (!$('.arct-container').length) {
if (D.wrap.data('arctOverflow'))
D.wrap.css('overflow', D.wrap.data('arctOverflow'));
D.wrap.css('marginRight', 0);
}

});

if (D.type=='ajax')
D.ajax_request.abort();

modals = modals.not($this);
});
}
},


// Установить опции по-умолчанию
setDefault: function(options) {
$.extend(true, default_options, options);
}


};


$(function() {
default_options.wrap = $((document.all && !document.querySelector) ? 'html' : 'body');
});


// Закрытие при нажатии Escape
$(document).bind('keyup.arct', function(e) {
var m = modals.last();
if (!m.length) return;
var D = m.data('arct');
if (D.closeOnEsc && (e.keyCode===27))
m.arct('close');
});


$.arct = $.fn.arct = function(method) {

if (actions[method]) {
return actions[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method==='object' || !method) {
return modal.init.apply(this, arguments);
} else {
$.error('jquery.arct: Method ' + method + ' does not exist');
}

};


})(jQuery);


И стиль:
Код:
/* Модальное окно для Товара */
.mohide { display: none; }
.avmo { margin: 0 auto; width: 300px; padding: 24px; background: #fff; border: 3px solid #bbb; border-radius: 10px; font-size:23px;}
.arct-overlay,
.arct-container { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000;}
.arct-container_i2 {position:absolute; top:70%; left:50%; margin:-200px 0 0 -200px;}


В тело страницы добавляем само оповещение:
Код:

<div class="mohide">
<div class="avmo" id="avnotice">
Товар добавлен в Корзину
</div>
</div>


К компоненте вывода товара (Объект в списке) добавляем скрипт:
Код:

<script type="text/javascript">
function gosend<?= $f_RowID ?>() {
setTimeout(function(){document.forma<?= $f_RowID ?>.submit();},2000);
}
</script>


и в форме добавления <form method=post id="netshop" дописываем:
name="forma<?= $f_RowID ?>" onSubmit="gosend<?= $f_RowID ?>(); return false"

К кнопке добавления товара в корзину:
name='sbmt' onclick="$('#avnotice').arct()"

Получится вот такое окошко оповещения о добавленном товаре
198 196 2013-02-19 17:33:49 12912
Описание проекта