Как работает popup окно

#1 Testweb ответил:

Advanced

Группа: Пользователи
Сообщений: 344
Регистрация: 12-Ноябрь 14
Репутация: -3
IPB version:3.4.x

Отправлено 11 Декабрь 2015 - 20:20

Ребят, не подскажите как создать модальное окно в IPB, то окно когда наводишь на ник пользователя на гл.странице...

Хочу так же сделать на одном информере... Только для иной задачи, не для отображения информации о пользователе...

Как сделать так, чтобы при наведении на свой элемент, всплывало данное окно?

#2 siv1987 ответил:

Advanced

Группа: IPB Skins Team
Сообщений: 9 446
Регистрация: 20-Март 09
Репутация: 2 545
IPB version:3.1.x

Отправлено 11 Декабрь 2015 - 20:41

Modal Windows - https://www.invision...al-windows-r215

<a href="#" id="blockid">My popup window</a>

if($('blockid')){
	$('blockid').observe('mouseover', function(e){
		Event.stop(e);
		
		var popup = new ipb.Popup('popupid', { 
			type: 'pane',
			initial: 'Html content here',
			hideAtStart: false,
			w: '600px',
			h: 250
		});
	});
}

#3 Testweb ответил:

Advanced

Группа: Пользователи
Сообщений: 344
Регистрация: 12-Ноябрь 14
Репутация: -3
IPB version:3.4.x

автор темы Отправлено 11 Декабрь 2015 - 20:44

Не совсем понимаю, если на странице присутствует элемент с 'blockid'. В этом случаи в код html страницы будет вставлено данное окно с css свойством display:none;. А при наведении курсора свойство удалится, так?

#4 siv1987 ответил:

Advanced

Группа: IPB Skins Team
Сообщений: 9 446
Регистрация: 20-Март 09
Репутация: 2 545
IPB version:3.1.x

Отправлено 11 Декабрь 2015 - 20:48

Не цитируйте сообщения с кодом. Разве не видно что это превращает страницу в нечитаемую портянку? Нахрена цитировать все сообщение целиком, быстрым ответом пользоваться не можете?

Testweb сказал(а):

Не совсем понимаю, если на странице присутствует элемент с 'blockid'.

Откуда понять, если даже толком не взглянули на код. Хотя два три раза посмотрите на пример и постарайтесь понять его логику работы.

#5 Testweb ответил:

Advanced

Группа: Пользователи
Сообщений: 344
Регистрация: 12-Ноябрь 14
Репутация: -3
IPB version:3.4.x

автор темы Отправлено 11 Декабрь 2015 - 21:12

Спс, работает. Только вот по клику появляется окно, нельзя ли сделать так, чтобы при попадании курсора на элемент сплывала окно. И сворачивалось как только курсор сползет с элемента. :rolleyes:

#6 siv1987 ответил:

Advanced

Группа: IPB Skins Team
Сообщений: 9 446
Регистрация: 20-Март 09
Репутация: 2 545
IPB version:3.1.x

Отправлено 11 Декабрь 2015 - 21:31

Вместо click используйте mouseover. Если окно не закрывается, закрывайте при потере наведения на элемент - mouseout.

if($('blockid')){
    var popup;
    $('blockid').observe('mouseover', function(e){
        Event.stop(e);
        
        popup = new ipb.Popup('popupid', { 
            type: 'pane',
            initial: 'Html content here',
            hideAtStart: false,
            w: '600px',
            h: 250
        });
    });
	$('blockid').observe('mouseout', function(e){
		if(popup){
			popup.kill();
		}
	});
}

#7 Testweb ответил:

Advanced

Группа: Пользователи
Сообщений: 344
Регистрация: 12-Ноябрь 14
Репутация: -3
IPB version:3.4.x

автор темы Отправлено 11 Декабрь 2015 - 21:43

Блин, классно

#8 Testweb ответил:

Advanced

Группа: Пользователи
Сообщений: 344
Регистрация: 12-Ноябрь 14
Репутация: -3
IPB version:3.4.x

автор темы Отправлено 11 Декабрь 2015 - 22:04

Последний вопрос, дело в том, что на странице не один такой элемент, как выставить на классы?

$$('.blockid')...

Что та не выходит...

#9 siv1987 ответил:

Advanced

Группа: IPB Skins Team
Сообщений: 9 446
Регистрация: 20-Март 09
Репутация: 2 545
IPB version:3.1.x

Отправлено 11 Декабрь 2015 - 22:23

Селектор $$ возвращает массив, следовательно нужно обходить каждый элемент в отдельности.

$$('.blockid').each(function(elem){ ... });

#10 Testweb ответил:

Advanced

Группа: Пользователи
Сообщений: 344
Регистрация: 12-Ноябрь 14
Репутация: -3
IPB version:3.4.x

автор темы Отправлено 11 Декабрь 2015 - 22:32

А без обхождения не выйдет?

Я вот сейчас это кувыряю

ipb.delegate.register(".blockid", ipb.global.blockid );

не могу понять как это работает..?

#11 siv1987 ответил:

Advanced

Группа: IPB Skins Team
Сообщений: 9 446
Регистрация: 20-Март 09
Репутация: 2 545
IPB version:3.1.x

Отправлено 11 Декабрь 2015 - 22:42

Testweb сказал(а):

А без обхождения не выйдет?

Вам то какая разница?

Testweb сказал(а):

не могу понять как это работает..?

Цитата

/* IPB3 Delegation manager */
/* Simple class that allows us to specify css selectors and an associated function to run */
/* when an appropriate element is clicked */

#12 Testweb ответил:

Advanced

Группа: Пользователи
Сообщений: 344
Регистрация: 12-Ноябрь 14
Репутация: -3
IPB version:3.4.x

автор темы Отправлено 11 Декабрь 2015 - 22:46

Ну как какая разница, юзеру лишний раз браузер грузить не хочется...))

#13 siv1987 ответил:

Advanced

Группа: IPB Skins Team
Сообщений: 9 446
Регистрация: 20-Март 09
Репутация: 2 545
IPB version:3.1.x

Отправлено 11 Декабрь 2015 - 23:00

Testweb сказал(а):

Ну как какая разница, юзеру лишний раз браузер грузить не хочется...))

У вас так уж и много элементов которые переваливают за сотни?
Каким образом собираетесь вещать обработчик на элемент?
Если не ставить его непосредственно не элементы, нужно делегировать на их родительский блок. А если для них общий является только body? onmouseover это не onclick. Там и так хватает слушателей.