Всплывающая сцена с непрозрачным фоном в html

Question

Мне нужно создать всплывающее окно like the map has here on this page, но я не уверен, как лучше всего это сделать и задался вопросом, сможет ли кто-нибудь указать мне на какой-то код, который бы соответствовал этому эффекту?

Любые идеи были бы замечательными.

Answer 1

Мощный плагин jQuery Twitter для Bootstrap действительно хорош. Вы можете получить html и javascript для этого, настроив bootstrap здесь: http://twitter.github.io/bootstrap/customize.html

выбрать только Модалы из раздела компонентов и модалов из секции плагинов jQuery и ничего больше. Затем загрузите.

Как использовать его можно найти здесь:

http://twitter.github.io/bootstrap/javascript.html#modals

в основном то, что вы делаете это в разметке, сделать DIV, который будет всплывающее окно, и дать ему классы «модальный скрыть замирания» , И затем сделайте что-то, что будет кнопкой для переключения модального, и дайте ему атрибуты data-target = "(css-селектор модального div)" и data-toggle = "modal".

Answer 2

Для создания основного диалогового/модальность, вам просто нужно создать новый div или показать существующую div с position: fixed и z-index: 1000 (или какой-то другой высокое значение) с помощью JavaScript. То, что div может иметь любое содержимое, которое вам нравится. Наряду с диалоговым/модальный DIV, вы, вероятно, хотите фон div, а также, вероятно, по крайней мере, следующий стиль:

position: fixed; 
height: 100%; 
width: 100%; 
z-index: 500; // or some other high value 

Если вы не хотите, чтобы создать свой собственный, вы могли бы взглянуть на jQuery UI dialogs или bootstrap modals.