yConfirm - подтверждение действий для DLE

yConfirm - подтверждение действий

yConfirm - подтверждение действий

Простое и удобное решение для подтверждения любого действия на сайте.
Полагаю всем хорошо известно подобное диалоговое окно подтверждения действия на jQueryUI используемое повсеместно в DLE.
yConfirm - подтверждение действий


Или же стандартный вызов окна confirm()
yConfirm - подтверждение действийyConfirm - подтверждение действий


Оба эти метода обладают рядом определенных преимуществ, но так же и обладают определенными недостатками:
- Окно вылазит "где-то" и приходится делать лишнее движение мышкой. Что особенно напрягает, когда приходится делать 10-50 подтверждений.
- В разных браузерах окно выглядит по разному (касается стандартного confirm).

На замену им был написан скрипт, который выводит кнопку подтверждения непосредственно поверх нажатой кнопки.
yConfirm - подтверждение действийyConfirm - подтверждение действийyConfirm - подтверждение действийyConfirm - подтверждение действий

Причем каждой кнопке можно прописать свой тайтл.

Пример вызова:
$('.deleter').click(function(){
	$(this).yconfirm('Да, удалить', function(b){
		//тут ваше действие
		b.remove(); //к примеру удаляем саму кнопку.
	})
})


Пример 2, тут для каждой кнопки с общим обработчиком можно использовать свой текст подтверждения заданный через data-confirm="текст":
$(document).on('click', '.do_stuff', function(e){
	e.preventDefault();
	$(this).yconfirm($(this).data('confirm')||'Подтверждаю', function(b){
		b.remove();
	})
})



javascript код:
jQuery.fn.yconfirm = function(t,callback){
	var $parent = $(this);
	$('.yconfirm').remove();
	$('<a href="#" class="yconfirm">' + t + '</a>')
		.appendTo('body')
		.position({my:"center", at:"center", of:$parent})
		.fadeIn(150)
		.on('mouseleave', function(){
			$(this).fadeOut(200,function(){
				$(this).remove()
			})
		})
		.on('click', function(e){
			e.preventDefault();
			$(this).remove();
			callback($parent);
		})
}


CSS стили:
.yconfirm{display:none;position:absolute;padding:0 17px;font:normal 13px/33px Arial;color:#fff;background:#ed344e;border-radius:3px;border:1px solid #dc1f39;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2);}
.yconfirm:hover{text-decoration:none;}


Живой пример: sandev.pro/demo/yconfirm.html


На этом все, надеюсь кому-то пригодится :)

С уважением,
Олег Александрович a.k.a. Sander
Комментарии: (3)
  1. foto
    VIP 18 июля 2019 09:29 #
    Спасибо)) очень пригодится
    0
  2. foto
    Посетитель 20 июля 2019 15:00 #
    очень удобная вещь. простая и понятная в использовании. только кто будет себе ставить чуть сдвигайте позиционирование кнопки. а то можно нечаянно сделать двойной клик
    0
  3. foto
    Гость 23 июля 2019 19:46 #
    Когда уже наконец выйдет обновление корзины или как вы говорили какой-то новый модуль? Лучше сделайте его, потому что по большей части тратите время на то, что не так важно как доработка корзины...
    +1
Добавить комментарий
  • Логин
  • E-mail (не обязательно)
Повторите рисунок:
antibot
© Sander-Development. 2009-2018.
При копировании, ссылка на источник обязательна.