Ajax модальные окна - есть ответ

MaximalGames, 322 просмотра

Xочу сделать ajax модальные окна у себя на странице, причем не просто там прикрутить simplemodal, а сделать нормальное окно, такое как к примеру на вконтакте при открытии фото, или аналагичное на facebook.

Перепробовал уже много скриптов, на разных библиотеках, уже глаза аж слипаются.

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

Может кто сталкивался с таким делом?

Ответы:

foGa

Тебе памятник надо поставить за толкование вопроса. Я эту фразу "при появлении окна задний фон оставался как будто "закрепленным", а появившийся, если оно выше экрана, со скруллом, причем если поскрулить то та страничка, которая на фоне остается на месте." сколько ни прочитал, так толком и не понял что ты конкретно имеешь в виду.

Артём Шегеда

не понятно: в чём проблема? надо просто корректно описать стили и создать правильную структуру документа.
обрати внимание, что подключён фреймворк и его лист стилей

rogallic

Вот самый простой вариант:
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test_002</title>
<script type="text/javascript">
function createWindow() {
document.getElementById('mywind').style.display = 'block';
document.getElementById('bod').style.overflow = 'hidden';
}
function closeWindow() {
document.getElementById('bod').style.overflow = 'scroll';
document.getElementById('mywind').style.display = 'none';
}
</script>
</head>
<body style="padding: 0px; margin: 0px;">
<div id="bod" style="position: absolute; height: 100%; width: 100%; overflow: scroll;">
<div style="padding:300px; margin: 300px; background: #efe" onclick="createWindow()">createWindow</div>
Сюда вставлять основной контент.
</div>
<div id="mywind" style="height: 100%; width: 100%; position:absolute; top: 0px; overflow:scroll; display: none; background-color: rgba(0,0,0,0.4);">
<div onclick="closeWindow()" style="padding:200px; margin: 300px; background: #eef">closeWindow</div>
Сюда вставлять содержимое окна.
</div>
</body>
</html>

rogallic

Извиняюсь, лишний раз добавил ответ.

14 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.