Всплывающие окно предупреждения JS

Эм... а добавить просто onclick="blabla();" к кнопке и прописать там нужную функцию для исполнения?

Там же можно и ID передать, кстати.

Собственный confirm может работать только через callback функции.

---------- Добавлено 23.06.2015 в 06:48 ----------

Примерно вот так, по вашему исходнику

var Confirm=(function() {

	var dlg = document.getElementById('hidden'),

		bty = document.getElementById('yes'),

		btn = document.getElementById('no'),

		title=document.getElementById('warn-title'), /* span не нужен */

		hide_dlg=function(){dlg.className=''},

		yCallback, nCallback;

		

	dlg.addEventListener('click',function(e){e.stopPropagation});

	

	bty.addEventListener('click',function(e){hide_dlg();if(yCallback) yCallback();});

	btn.addEventListener('click',function(e){hide_dlg();if(nCallback) nCallback();});

	

	return function(title,yesCallback,noCallback){

		yCallback=yesCallback;

		nCallback=noCallback;

		title.textContent=title;

		dlg.className = 'substrate';

	};	

})();



/* 



пример применения 



где-то в контексте имеется table и определена строка r



*/



Confirm('Товар будет удален из заказа. Продолжить?',function(){

	table.deleteRow(r.rowIndex);

	do_something_else();

});



/* 



или такой пример 



в контексте есть функция remove_all



*/



if(some_checks())

	Confirm('Список заказов будет очищен. Продолжить?',remove_all);

---------- Добавлено 23.06.2015 в 06:58 ----------

Пояснения новичку. var Confirm=(function(){})(); - такая конструкция запускает безымянную функцию непосредственно сразу после того как интерпретатор отпарсит ее текст. Безымянная функция возвращает closure-функцию - то есть функцию из своего внутреннего scope. Так на js вообще делаются объекты с приватными свойствами и методами и публичными свойствами и методами. Все что до return - приват, все что внутри return - паблик. В данном случае это - функция. Это значит что Confirm будет функцией которая "знает" про все приватные свойства и методы которые больше никому не видны кроме нее. Функция Confirm имеет 3 аргумента - сообщение, которое названо заголовок диалога и 2 калбека. Ни один не обязательный. То есть можете юзать ее как алерт в том числе, но кнопок будет 2. На каждую команду требуется передать функцию из контекста вызова конфирма. Это может быть обычная функция с именем - второй пример, или безымянная как в первом примере.

---------- Добавлено 23.06.2015 в 07:14 ----------

Да, строчка

dlg.addEventListener('click',function(e){e.stopPropagation});

нужна если ваши диалоги исчезают автоматически при щелчке куда-то кроме самого диалога. Это делается через поиск элементов с заранее согласованным именем класса по щелчку на body.

kostyanet, Спасибо за функцию, но хотелось бы использовать способ полного разделения, без использования в коде HTML кода JS. То есть по определенным id элементов, отдельно в js-файле строится сценарий. Возможно ли так сделать?

Ну повешайте на load документа этот кусок где Confirm определяется. Или надо его переписать чтобы он сам по load инициализировался.

Тогда у меня свой вопрос - вы же новичок, да? Кто вас научил этой ереси - избегать js в хтмле? Тем самым вы сильно будете осложнять жизнь. Посмотрите как устроена страница на сайте google.com и убедитесь что в лучших доман Ландона js находится именно в хтмле и именно там, где нужен.

---------- Добавлено 23.06.2015 в 07:45 ----------

Хорошо, вот такой пример. Допустим у вас есть тележка - список заказов. Коню ясно что обновляется она через js. Ну да, вы можете по кукам ее сразу сгенерить с сервера, для начала. А можете не генерить, ибо куки - те же самые на клиенте. Но тогда обновить элемент вы должны как только так сразу, иначе получится что страница загрузится, а список все еще пуст, потом бамц - появилось. Только положив js сразу за хтмлей корзины вы можете ее обновить немедленно.

---------- Добавлено 23.06.2015 в 08:41 ----------

Для самоинициализации делается так, по простому:

var Confirm=(function() {

	/* забиваем в скоп привата все переменные, пустышки */

	var dlg,bty,btn,title,hide_dlg=function(){dlg.className=''},yCallback,nCallback,

	/* и пишем функцию которая их наполнит смыслом */

	init=function(){

		dlg = document.getElementById('hidden'),
		bty = document.getElementById('yes'),
		btn = document.getElementById('no'),
		title=document.getElementById('warn-title');
		
		dlg.addEventListener('click',function(e){e.stopPropagation});
	
		bty.addEventListener('click',function(e){hide_dlg();if(yCallback) yCallback();});
		btn.addEventListener('click',function(e){hide_dlg();if(nCallback) nCallback();});

	};

	/* и запускаем отложенную инициализацию после загрузки документа */

	window.addEventListener('load',init);
		
	return function(title,yesCallback,noCallback){
		yCallback=yesCallback;
		nCallback=noCallback;
		title.textContent=title;
		dlg.className = 'substrate';
	};


})();