Закрытие модальных окон

[Strategius 52]

Добрый день. Подскажите, пожалуйста, можно ли сделать так, чтобы модальные окна (к примеру окно входа) закрывались не только по нажатию на крестик в углу окна, но и просто по тапу на любое место экрана, как это сделано в popup-окнах?

 

А то не очень удобно каждый раз тыкать в эту маленькую кнопку, хотелось бы закрывать его наугад.

 

Никто не подскажет? :( В DLE насколько понял, такая же проблема, человек подсказал, что нужно скрипт дополнить, но какой и где...

 

Неужели не реализуемо?

[siv1987 2628]

1. Форум является некоммерческой составляющей проекта IPBSkins.ru. Вся помощь, которая здесь оказывается, добровольна и бесплатна. Не забывайте, что мы тратим свое свободное время. Будьте терпеливы, ожидая ответа. Если ответ не получен, "апать" тему с вопросом разрешается не ранее, чем через два дня после ее создания.

[Strategius 52]

А не подскажете хоть примерно, где копать, пожалуйста? Вроде это где-то в js-скриптах прописано?

[Strategius 52]

А решение вообще возможно найти, или это в принципе невозможно, прописано глубоко в скриптах? Просто довольно неудобно закрывать модальные окна, каждый раз нажимая на маленькую кнопку в углу, хотелось бы, чтобы они закрывались как popup - просто при тапе на экран...

[siv1987 2628]

А решение вообще возможно найти, или это в принципе невозможно, прописано глубоко в скриптах

Ничего невозможного в принципе нет. Ищите если нечего делать, скрипты форума расположены в папке /public/js/.

[Strategius 52]

Не получается найти этот момент :( А не подскажете приблизительно, в каком файле находится ответственный за это код?

[newbie 1723]

А не подскажете приблизительно, в каком файле находится ответственный за это код?

public/js/ipb.js

[Strategius 52]

Нашел там такой код:

 

this.closeLink = new Element('div', { 'id': this.id + '_close' } ).addClassName('popupClose').addClassName('clickable');

Сейчас окно закрывается по нажатию на кнопку, к которой присвоен класс "popupClose". Не подскажете, пожалуйста, как сюда же добавить закрытие по клику мышкой по экрану?

[newbie 1723]

Сейчас окно закрывается по нажатию на кнопку, к которой присвоен класс "popupClose". Не подскажете, пожалуйста, как сюда же добавить закрытие по клику мышкой по экрану?

 

Разбирайтесь :)

Дам подсказки.

Если popup-окно не модальное, то его можно закрывать, кликнув вне области окна.

		if( this.options.modal == false ){
		new Effect.Appear( $( this.wrapper ), { duration: 0.3, afterFinish: function(){
			if( Object.isFunction( this.callbacks['afterShow'] ) )
			{
				this.callbacks['afterShow']( this );
			}
		}.bind(this) } );
		this.document_event = this.handleDocumentClick.bindAsEventListener(this);
		this.setDocumentEvent();
	} else {
		new Effect.Appear( $('document_modal'), { duration: 0.3, to: this.options.modalOpacity, afterFinish: function(){
			new Effect.Appear( $( this.wrapper ), { duration: 0.4, afterFinish: function(){
				if( Object.isFunction( this.callbacks['afterShow'] ) )
				{
					this.callbacks['afterShow']( this );
				}
		 	}.bind(this) } );
		}.bind(this) });
	}

Строки

			this.document_event = this.handleDocumentClick.bindAsEventListener(this);
		this.setDocumentEvent();

То есть Вам нужно будет посмотреть функции handleDocumentClick и setDocumentEvent и определить при каких условиях/параметрах окно скрывается. Там по паре строк кода.

Естественно нужно будет добавить 2 строки в else, либо вынести из if

[Strategius 52]

нужно будет добавить 2 строки в else, либо вынести из if

Т.е. эти 2 строки отвечают за скрытие окна при нажатии вне его области?

 

Я добавил их в функцию document_modal, но все равно закрывается только по нажатию на крестик...

 

new Effect.Appear( $('document_modal'), { duration: 0.0, to: this.options.modalOpacity, afterFinish: function(){
			new Effect.Appear( $( this.wrapper ), { duration: 0.0, afterFinish: function(){
				if( Object.isFunction( this.callbacks['afterShow'] ) )
				{
					this.callbacks['afterShow']( this );
				}
		 	}.bind(this) } );
			this.document_event = this.handleDocumentClick.bindAsEventListener(this);
		        this.setDocumentEvent();
		}.bind(this) });

Изменено 9 августа 2017 пользователем Strategius

[newbie 1723]

Я добавил их в функцию document_modal, но все равно закрывается только по нажатию на крестик...

Я же написал

нужно будет посмотреть функции handleDocumentClick и setDocumentEvent и определить при каких условиях/параметрах окно скрывается.

Вы это сделали?

[Strategius 52]

Вы это сделали?

Да, конечно. Скрытие выполняется при условии, что окно не модальное:

 

if( this.options.modal == false ){

В противном случае скрытие выполняться не будет

 

} else {

Что я не так делаю? :(

Изменено 9 августа 2017 пользователем Strategius

[newbie 1723]

нужно будет посмотреть функции handleDocumentClick

	handleDocumentClick: function(e)
{
	Debug.write( 'document click: ' + Event.element(e).id);

	if( !Event.element(e).descendantOf( this.wrapper ) && ( this.options.attach && ( Event.element(e).id != this.options.attach.target.id ) ) )
	{
		this.hide(e);
	}
},

Вариант

if( !Event.element(e).descendantOf( this.wrapper ) && ( this.options.attach && ( Event.element(e).id != this.options.attach.target.id ) ) )

заменить на

if( !Event.element(e).descendantOf( this.wrapper ) && ( this.options.modal || ( this.options.attach && ( Event.element(e).id != this.options.attach.target.id ) )) )

[Strategius 52]

Теперь заработало! Огромное Вам спасибо, выручили, что бы без Вас делал!