Как работает popup окно - Дизайн и модификация Invision Power Board

Перейти к содержимому

 

Правила раздела

Здесь обсуждаются вопросы по настройке и администрированию форумов IPB 3.x.
Пожалуйста, не оффтопьте, если зашли сюда случайно, и обратите внимание на соседние разделы.
Установка, настройка и обслуживание форумов IPB 2.x.
Оформление форумов, включая верстку скинов.
Размещение рекламы на форумах.
SEO оптимизация форума.
Техническая поддержка наших скинов и модов.

СвернутьПрикрепленные теги

Теги не найдены

  • 3 Страниц +
  • 1
  • 2
  • 3

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

#1 Пользователь не на сайте   Testweb ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 298
  • Регистрация: 12-Ноябрь 14
  • Репутация: -3
  • IPB version:3.4.x
 

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

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


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

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

#2 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 762
  • Регистрация: 20-Март 09
  • Репутация: 2 287
  • IPB version:3.1.x
 

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

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

1

#3 Пользователь не на сайте   Testweb ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 298
  • Регистрация: 12-Ноябрь 14
  • Репутация: -3
  • IPB version:3.4.x
 

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

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

#4 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 762
  • Регистрация: 20-Март 09
  • Репутация: 2 287
  • IPB version:3.1.x
 

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

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

Просмотреть сообщениеTestweb сказал(а):

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

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

#5 Пользователь не на сайте   Testweb ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 298
  • Регистрация: 12-Ноябрь 14
  • Репутация: -3
  • IPB version:3.4.x
 

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

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

#6 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 762
  • Регистрация: 20-Март 09
  • Репутация: 2 287
  • IPB version:3.1.x
 

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

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

1

#7 Пользователь не на сайте   Testweb ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 298
  • Регистрация: 12-Ноябрь 14
  • Репутация: -3
  • IPB version:3.4.x
 

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

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

#8 Пользователь не на сайте   Testweb ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 298
  • Регистрация: 12-Ноябрь 14
  • Репутация: -3
  • IPB version:3.4.x
 

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

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

$$('.blockid')...

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

#9 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 762
  • Регистрация: 20-Март 09
  • Репутация: 2 287
  • IPB version:3.1.x
 

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

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

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

#10 Пользователь не на сайте   Testweb ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 298
  • Регистрация: 12-Ноябрь 14
  • Репутация: -3
  • IPB version:3.4.x
 

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

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

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

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

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

#11 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 762
  • Регистрация: 20-Март 09
  • Репутация: 2 287
  • IPB version:3.1.x
 

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

Просмотреть сообщение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 */

1

#12 Пользователь не на сайте   Testweb ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 298
  • Регистрация: 12-Ноябрь 14
  • Репутация: -3
  • IPB version:3.4.x
 

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

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

#13 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 762
  • Регистрация: 20-Март 09
  • Репутация: 2 287
  • IPB version:3.1.x
 

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

Просмотреть сообщениеTestweb сказал(а):

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

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

#14 Пользователь не на сайте   Testweb ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 298
  • Регистрация: 12-Ноябрь 14
  • Репутация: -3
  • IPB version:3.4.x
 

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

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

Вложений

  • Вложение  av-29384.jpg (18,59К)
    Количество загрузок: 14

Сообщение изменено: Testweb (12 Декабрь 2015 - 12:10)

0

#15 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 762
  • Регистрация: 20-Март 09
  • Репутация: 2 287
  • IPB version:3.1.x
 

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

type: balloon
stem: true
0

Сообщить об этой теме:


  • 3 Страниц +
  • 1
  • 2
  • 3


Быстрый ответ

  

1 пользователей читают эту тему
0 зарегистрированных, 1 гостей, 0 скрытых


Контактная информация

Вопросы по работе сайта

+7 (917) 501-4765
C 10 до 20 в рабочие дни (время московское)

Техническая поддержка

Контактные данные специалистов

Дизайн форумов

IPB 3.x ¦ IPB 2.x

Бесплатные шаблоны

IPB 3.2 – 3.4 ¦ IPB 3.1 ¦ IPB 3.0 ¦ IPB 2.2 – 2.3 ¦ IPB 2.1 ¦ Клипарт
Лицензия на использование ¦ Ваша поддержка ¦ О проекте
Copyright © 2005-2016 IPBSkins.ru Team
При копировании материалов с сайта
прямая ссылка на источник обязательна