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

[Testweb 3]

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

 

 

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

 

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

[siv1987 2629]

Modal Windows - https://www.invisionpower.com/support/guides/_/advanced-and-developers/user-interface/modal-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
	});
});
}

[Testweb 3]

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

[siv1987 2629]

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

 

  Testweb писал:

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

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

[Testweb 3]

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

[siv1987 2629]

Вместо 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();
	}
});
}

[Testweb 3]

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

[Testweb 3]

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

 

$$('.blockid')...

 

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

[siv1987 2629]

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

 

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

[Testweb 3]

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

 

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

 

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

 

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

[siv1987 2629]

  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 */

[Testweb 3]

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

[siv1987 2629]

  Testweb писал:

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

У вас так уж и много элементов которые переваливают за сотни?

Каким образом собираетесь вещать обработчик на элемент?

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

[Testweb 3]

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

Изменено 12 декабря 2015 пользователем Testweb

[siv1987 2629]

type: balloon

stem: true