Модальное всплывающее окно с использованием Javascript и Css

Question

Я использую модальное всплывающее окно AJAX в моем проекте, но есть проблема с ним.

Теперь я решил добиться похожего поведения, используя javascript

Я могу показать всплывающее окно, используя

document.getElementById('dv').style.display = "block";

Теперь мне просто нужно, как я могу отключить фон, как в модальном всплывающем окне?

Answer 1

вы создаете div, который охватывает всю страницу, но первоначальный стиль - display: none; наряду с любыми другими стилями. т.е. прозрачность 80% с черным цветом фона ..

Когда вы показываете dv, измените атрибут отображения div (см. Выше). Просто убедитесь, что у dv более высокий z-индекс, чем у фонового div, а у фонового div более высокий z-индекс, чем у контента на странице:)

Answer 2

Рассматривали ли вы использовать библиотеку для этого?Самым удобным для программиста и гибким из всех, что я нашел, является NyroModal (на основе jQuery).Преимущество библиотеки в том, что она будет иметь дело со многими тонкими вещами, которые происходят с модальными диалоговыми окнами, например, гарантируя, что она эффективно работает во всех браузерах (и преодолевает различные причуды вокруг таких вещей, как позиционирование), включая и выключая анимацию, создавая эффект лайтбокса вокруг нее.

NyroModal позволяет динамически создавать диалоги, в то время как большинство библиотек ориентированы на более простые варианты использования, такие как «сделать все изображения кликабельными, чтобы они отображались в виде лайтбоксов, когда пользователь нажимает на них».