Перейти к публикации
View in the app

A better way to browse. Learn more.

Дизайн и модификация Invision Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Как работает 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
	});
});
}

Опубликовано:
  • Автор

Не совсем понимаю, если на странице присутствует элемент с '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();
	}
});
}

Опубликовано:
  • Автор

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

Опубликовано:
  • Автор

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

 

$$('.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 */

Опубликовано:
  • Автор

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

Опубликовано:

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

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

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

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

Опубликовано:
  • Автор

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

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

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

Опубликовано:

type: balloon

stem: true

Опубликовано:
  • Автор

Спс, вот только закрываться окно перестало...

 

Копаю

hideClose: true,

ничего не выходит

 

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

 

Тоже не работает...

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

Сейчас на странице 0

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

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.