Модальное окно своими руками "JavaScript" - JavaScript, Ajax

SoftKoc · 21.12.2012, 14:31

Здравствуйте

Столкнулся с проблемой вот такого рода - нужно реализовать модальное окно на "JavaScript" без плагинов "arcticModal, ..." - и всего такого подобного, короче говоря своими руками.

Подскажите пожалуйста как это можно сделать, и если можно примеры покажите.

Проблема в том что на форумах мало инфы по таким вопросам

Вот решил создать тут тему такого рода.

MyLastHit · 21.12.2012, 17:03

Лок фона чтобы был? Создать overlay фон полупрозрачный с

Код:

position: absolute;
top:0;
left: 0;
heght: 100%;
width: 100%;
background: rgba(0,0,0,.2);
display: none;

В нем создать блок окна с

Код:

position: absolute;
height: ...;
width: ...'
top:50%;
left: 50%;
margin-top: (-половина высоты);
margin-left: (-половина ширины);
background: #fff;

Ну и менять значение display у фона, чтобы он отображался если надо при клике где-то.

LZero · 21.12.2012, 17:46

Вот пример набросал простой.

PHP код:


			
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>
$(function () {
    setTimeout(function () {
        $('<div class="modal"></div>').html('Модальное окно своими руками "JavaScript"').appendTo('body');
        $('<div class="shadow"></div>').css('height', $(document).height()).appendTo('body');
    }, 2000);
});
</script>


<style type="text/css">
.modal {
    width: 20%;
    height: 20%;
    background: #fff;
    border: 2px solid #ff0000;
    position: fixed;
    top: 40%;
    left: 40%;
    z-index: 10;
}
.shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    z-index: 9;
}
</style>
</head>
<body>
bla-bla-bla
</body>
</html>

SoftKoc · 22.12.2012, 12:39

Я делаю вот таким методом:

Код:

var overlay = document.createElement('div');
overlay.id = "overlay";
overlay.className = "overlay";
overlay.onclick = WindowClose;
document.body.appendChild(overlay);

overlay - описан в css вот так:

Код:

.overlay {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  overflow: auto;
  z-index: 1000;
}

А вот само окно мне нужно формировать динамически - точнее подтягивать шаблон или что-то в этом роде. Вот с этим и все проблемы.

Думал юзать <iframe> но это не совсем красиво получается.

MyLastHit · 22.12.2012, 14:08

underscore.js подключите. Там шаблонная система очень простая и удобная.

SoftKoc · 22.12.2012, 17:42

А вот я задумался, а если делать вот так:

Код:

var overlay = document.createElement('div');
overlay.id = "overlay";
overlay.className = "overlay";
overlay.onclick = WindowClose;
overlay.innerHTML = '';
document.body.appendChild(overlay);

overlay.innerHTML - Ajax-ом вытягивать таким образом нужный нам шаблон "*.tpl".
Как вы думаете это нормальный вариант получится???

21.12.2012, 14:31	#1
SoftKoc Форумчанин Регистрация: 07.11.2009 Сообщений: 218	Модальное окно своими руками "JavaScript" Здравствуйте Столкнулся с проблемой вот такого рода - нужно реализовать модальное окно на "JavaScript" без плагинов "arcticModal, ..." - и всего такого подобного, короче говоря своими руками. Подскажите пожалуйста как это можно сделать, и если можно примеры покажите. Проблема в том что на форумах мало инфы по таким вопросам Вот решил создать тут тему такого рода. Я бы изменил мир, но Бог не дает исходников... Если помог, нажми на весы и поставь плюс - в знак благодарности

21.12.2012, 17:03	#2
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	Лок фона чтобы был? Создать overlay фон полупрозрачный с Код: `position: absolute; top:0; left: 0; heght: 100%; width: 100%; background: rgba(0,0,0,.2); display: none;` В нем создать блок окна с Код: `position: absolute; height: ...; width: ...' top:50%; left: 50%; margin-top: (-половина высоты); margin-left: (-половина ширины); background: #fff;` Ну и менять значение display у фона, чтобы он отображался если надо при клике где-то. Ненавижу быть как все, но люблю, чтобы все были как я.

21.12.2012, 17:46	#3
LZero Форумчанин Регистрация: 20.07.2012 Сообщений: 129	Вот пример набросал простой. PHP код: <!DOCTYPE html> <html> <head> <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> <script type='text/javascript'> $(function () { setTimeout(function () { $('<div class="modal"></div>').html('Модальное окно своими руками "JavaScript"').appendTo('body'); $('<div class="shadow"></div>').css('height', $(document).height()).appendTo('body'); }, 2000); }); </script> <style type="text/css"> .modal { width: 20%; height: 20%; background: #fff; border: 2px solid #ff0000; position: fixed; top: 40%; left: 40%; z-index: 10; } .shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.3; z-index: 9; } </style> </head> <body> bla-bla-bla </body> </html> Последний раз редактировалось LZero; 21.12.2012 в 17:51.

22.12.2012, 12:39	#4
SoftKoc Форумчанин Регистрация: 07.11.2009 Сообщений: 218	Я делаю вот таким методом: Код: `var overlay = document.createElement('div'); overlay.id = "overlay"; overlay.className = "overlay"; overlay.onclick = WindowClose; document.body.appendChild(overlay);` overlay - описан в css вот так: Код: `.overlay { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); overflow: auto; z-index: 1000; }` А вот само окно мне нужно формировать динамически - точнее подтягивать шаблон или что-то в этом роде. Вот с этим и все проблемы. Думал юзать <iframe> но это не совсем красиво получается. Я бы изменил мир, но Бог не дает исходников... Если помог, нажми на весы и поставь плюс - в знак благодарности Последний раз редактировалось SoftKoc; 22.12.2012 в 12:42.

22.12.2012, 14:08	#5
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	underscore.js подключите. Там шаблонная система очень простая и удобная. Ненавижу быть как все, но люблю, чтобы все были как я.

22.12.2012, 17:42	#6
SoftKoc Форумчанин Регистрация: 07.11.2009 Сообщений: 218	А вот я задумался, а если делать вот так: Код: `var overlay = document.createElement('div'); overlay.id = "overlay"; overlay.className = "overlay"; overlay.onclick = WindowClose; overlay.innerHTML = ''; document.body.appendChild(overlay);` overlay.innerHTML - Ajax-ом вытягивать таким образом нужный нам шаблон ".tpl". Как вы думаете это нормальный вариант получится???* Я бы изменил мир, но Бог не дает исходников... Если помог, нажми на весы и поставь плюс - в знак благодарности

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Чтение BMP-файла "руками" [Cи]	MooNDeaR	Помощь студентам	22	29.05.2012 22:20
Натолкните на алгоритм или "Ночной город своими руками"	Karp_13	Общие вопросы C/C++	18	12.03.2012 01:05
"Hide Folder" своими руками (Delphi)	Air	Помощь студентам	3	13.11.2008 03:38
сделать окно "открыть","сохранить как"	blackstersl	Общие вопросы Delphi	1	24.08.2008 10:31