Перейти к публикации
Дизайн и модификация IPS Community IPBSkinsBETA
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...
Testweb

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

Рекомендованные сообщения

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

 

 

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

 

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

Поделиться сообщением


Ссылка на сообщение

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
	});
});
}

  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение

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

 

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

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

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение

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

  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение

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

 

$$('.blockid')...

 

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

Поделиться сообщением


Ссылка на сообщение

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

 

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

Поделиться сообщением


Ссылка на сообщение

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

 

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

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
А без обхождения не выйдет?

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

 

 

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

/* IPB3 Delegation manager */

/* Simple class that allows us to specify css selectors and an associated function to run */

/* when an appropriate element is clicked */

  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение

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

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

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

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

  • Upvote 1

Поделиться сообщением


Ссылка на сообщение
12/12/15 09:10 (изменено)

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

post-57319-0-98904000-1449911465_thumb.jpg

Изменено пользователем Testweb

Поделиться сообщением


Ссылка на сообщение

type: balloon

stem: true

Поделиться сообщением


Ссылка на сообщение

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...