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

 

 

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

 

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

  
$$('.blclass').each(function(elem){ 

 elem.observe('mouseover', function(e){

     Event.stop(e); 

     popup = new ipb.Popup('popup', {  
			type: 'balloon',
			stem: true,
			attach: { target: elem, position: 'auto'},
			hideAtStart: false,
			initial: 'hml',
			hideClose: true,
			w: '320px;',					
     });

     elem.observe('mouseout', function(e){
         if(popup)
               popup.kill();

  });
});

 

Почему модальные окна закрываются только по щелчку?

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

:unsure: Не подскажите? :unsure:

У меня закрывается и при mouse out. Смотрите в консоли ошибок и дебажите переменную popup. Она желательно быть локальной а не глобальной.

Я хз, так

$$('.blclass').each(function(elem){ 

 elem.observe('mouseover', function(e){

     Event.stop(e); 

     popup = new ipb.Popup('popup', {  
               type: 'balloon',
               stem: true,
               attach: { target: elem, position: 'auto'},
               hideAtStart: false,
               initial: 'hml',
               hideClose: true,
               w: '320px;',  

    this.observe('mouseout', function(e){
	 pop.hide();	
           });	              
     });

});

 

работает, но не совсем верно. После закрытия, повторно не откроется... Ошибки в консоле отсутствуют

 

Я хз что делать...

Окна по щелчку закрываются, почему?

 

Даже если убрать

this.observe('mouseout', function(e){

pop.hide();

});

Вы в консоли смотрели? Во первых в этом скрипте есть синтаксические ошибки, возьмите нормальный редактор и приведите код в порядок.

Я помню что там были какие-то косяки с аттачем евентов к элементам. Просто тупо не хотели повторно срабатывать. С чем это связано так и не разобрался, возился долго, в итоге тоже какие-то костыли приделал.

Но в данном случае ошибка как минимум в { target: elem, position: 'auto'} - elem это переменная цикла, вместо нее нужно использовать this.

popup - одна переменная для всех элементов. Попробуйте вместо нее массив, или непосредственно указать ее к элементу this.popup = new ipb.Popup

Вот рабочий пример с делегированием

 

<div id="test">
<a href="#" class="blclass" data-id=1>Test 1</a><br>
<a href="#" class="blclass" data-id=2>Test 2</a><br>
</div>

<script>
var popup;
$('test').observe('mouseover', function(event) {
var row = event.findElement('a.blclass');
if(row){
	popup = new ipb.Popup('popup', {
				type: 'balloon',
				stem: true,
				attach: {target: row},
				hideAtStart: false,
				initial: row.innerHTML,
				w: '320px;'
	});
}
});
$('test').observe('mouseout', function(event) {
var row = event.findElement('a.blclass');
if(row){
	if(popup){
		popup.kill();
		popup = false;
	}
}
});
</script>

Рабочий ;)

 

Без обертки "<div id="test">", не получится никак?

Вы можете делегировать на любой общий родительский элемент. В данном случае это пример для наглядности. Костыль конечно, но я так и не разобрался что там с аттачами евентов. Проблема есть именно с типом balloon который прикрепляет модальное окно к элементу.

Спасибо, сойдет :rolleyes:

На счет временного интервала.

 

Гляжу есть такой параметр как "delay: 2000,", в моем случаи он не работает, почему?

Гляжу есть такой параметр как "delay: 2000,",

Где?

в моем случаи он не работает, почему?

Потому что нужно читать внимательно описание.

delay: this is an object with keys 'show' and 'hide'

 

delay: { show: 2000, hide: 4000 },

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

Тут используются Hovercards.

Вообще можно их задействовать.

Хочу разобрать, где выставлено ограничение. Что окно не может принимать ширину выше 500px...?