Тогда вот ещё чё я намудрил, может это сойдёт:
| Код |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta http-equiv="MSThemeCompatible" content='Yes'>
<meta name="Generator" content='EditPlus 2.21.330'>
<meta name="Author" content='Ciber SLasH'>
<title>JavaScript :: Псевдо-криво-модальное окно</title>
<script type='text/javascript'>
function myConfirm() {
this.timer = null; // таймер опроса состояние диалога
this.work = ""; // имя функции, которая должна быть продолжена выполняться после закрытия диалога
this.id = 0; // ID-диалога
this.dlg = document.createElement("DIV");
this.dlg.returnValue = false; // состояние диалога (false — закрыто; true — открыто)
this.dlg.id = "dlg";
var content =
"<div id='dlg_header'></div>"+
"<div id='dlg_body'></div>"+
"<div id='dlg_footer'>"+
"<button onClick='edChildes(contObj, false); with (parentNode.parentNode) { returnValue = true; style.display = \"none\" }'>Закрыть</button>"+
"</div>";
document.body.appendChild(this.dlg);
this.dlg.innerHTML = content;
}
/*** Функция опроса состояние диалога ***/
myConfirm.prototype._watch = function () {
this.timer = setInterval(_unwatch, 300);
var thisObj = this;
/** Остановка опроса окна **/
function _unwatch() {
if (thisObj.dlg.returnValue) {
clearInterval(thisObj.timer);
eval(thisObj.work)();
}
}
}
/*** Установка заголовка диалога ***/
myConfirm.prototype.setHeader = function (caption) {
this.dlg.childNodes[0].innerHTML = caption;
}
/*** Установка внутренностей диалога ***/
myConfirm.prototype.setBody = function (content) {
this.dlg.childNodes[1].innerHTML = content;
}
/*** Показ диалога ***/
myConfirm.prototype.show = function () {
edChildes(contObj, true); // блокируем все элементы
this.dlg.style.display = "block"; // показываем диалог
this._watch(); // устанавливаем слежку за состоянием диалога
}
/*** Enable/disable childes ***/
function edChildes(elem, flag) {
for (var i = 0; i < elem.childNodes.length; i++) {
if (elem.childNodes[i].hasChildNodes())
edChildes(elem.childNodes[i], flag);
else
if (typeof(elem.childNodes[i].disabled) != "undefined")
elem.childNodes[i].disabled = flag;
}
if (typeof(elem.disabled) != "undefined")
elem.disabled = flag;
}
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
var funcData = {}; // данные функции
function doWork() {
if (modalDlg.id == 0) {
// Действия перед диалогом
funcData.perem1 = 0;
modalDlg.id = 1; // обозначаем, что следущим должен быть диалог №1
}
//==[ Диалог №1 ]===========================================================
if (modalDlg.id == 1) {
if (modalDlg.dlg.returnValue) { // если диалог закрыли
// Операторы после 1-го диалога
funcData.perem1++;
alert("Продолжаем !!\nperem1: "+funcData.perem1);
modalDlg.dlg.returnValue = false; // сбрасываем флаг закрытия диалога
modalDlg.id = 2; // обозначаем, что следущим должен быть диалог №2
} else { // иначе ещё не создали
modalDlg.setHeader("Диалог №1");
modalDlg.setBody("Это псевдо-модальный диалог...");
modalDlg.work = "doWork"; // имя функции
modalDlg.show();
}
}
//==[ Диалог №2 ]===========================================================
if (modalDlg.id == 2) {
if (modalDlg.dlg.returnValue) { // если диалог закрыли
// Операторы после 2-го диалога
funcData.perem1++;
alert("Продолжаем !!\nperem1: "+funcData.perem1);
modalDlg.dlg.returnValue = false; // сбрасываем флаг закрытия окна
modalDlg.id = 0; // обозначаем, что диалоги закончились
} else { // иначе ещё не создали
modalDlg.setHeader("Диалог №2");
modalDlg.setBody("Это псевдо-модальный диалог...");
modalDlg.work = "doWork"; // имя функции
modalDlg.show();
}
}
}
onload = function () {
modalDlg = new myConfirm();
contObj = document.getElementById("content");
doWork();
}
</script>
<style type='text/css'>
#dlg {
width: 200px;
height: auto;
position: absolute;
left: 50%;
top: 50%;
margin: -10px -100px;
border: 4px groove black;
text-align: center;
display: none;
z-index: 1000;
background: white;
}
#dlg_header {
font: bold 1em Arial, Helvetica, Verdana, sans-serif;
border-bottom: 2px solid black;
color: white;
background: red;
}
</style>
</head>
<body>
<div id='content'>
<form method="POST" action='http://somesite.com/prog/adduser' enctype="multipart/form-data">
Имя: <input type="text" name="firstName"><br>
Фамилие: <input type="text" name="lastName"><br>
e-mail: <input type="text" name="e-mail"><br>
<input type="radio" name="sex" value="Male"> Male<br>
<input type="radio" name="sex" value="Female"> Female<br>
<input type="submit" value="Send"><input type="reset"><br>
<button type="submit" name="submit"><img alt="wow"></button>
<button type="reset" name="reset"><img alt="oops"></button><br>
Отослать файл: <input type="file" name="FileName">
</form>
<hr>
<form method="POST" action='http://somesite.com/prog/component-select'>
<select multiple size="4" name="selName">
<option selected value="opt[]">Component - 1</option>
<option selected value="opt[]">Component - 2</option>
<option selected value="opt[]">Component - 3</option>
<option selected value="opt[]">Component - 4</option>
<option selected value="opt[]">Component - 5</option>
<option selected value="opt[]">Component - 6</option>
<option selected value="opt[]">Component - 7</option>
</select><br>
<input type="submit" value="Send"><input type="reset">
</form>
<hr>
<form method="POST" action='http://somesite.com/prog/someprog'>
<select name="OS">
<option selected label="none" value="none">Выбери OS</option>
<optgroup label="Windows">
<option value="Win95">Windows 95</option>
<option value="Win98">Windows 98</option>
<option value="WinXP">Windows XP</option>
</optgroup>
<optgroup label="UNIX">
<option value="LinuxMDK">Linux Mandrake</option>
<option value="FreeBSD">FreeBSD</option>
</optgroup>
<optgroup label="Others">
<option value="MacOS">MacOS</option>
<option value="QNX">QNX</option>
</optgroup>
</select>
</form>
<hr>
<form method="POST" action='http://somesite.com/prog/text-read'>
<textarea name="thetext" rows="5" cols="80">
Первая строка начального текста.
Вторая строка начального текста.
</textarea><br>
<input type="submit" value="Send"><input type="reset">
</form>
<hr>
<form action='' method="POST">
<fieldset>
<legend>Персональная информация</legend>
Фамилия: <input type="text" name="lname" tabindex="1">
Имя: <input type="text" name="fname" tabindex="2">
Адрес: <input type="text" name="address" tabindex="3">
</fieldset>
<fieldset>
<legend>История болезни</legend>
<input type="checkbox" name="his[]" value="Smallpox" tabindex="20"> Оспа
<input type="checkbox" name="his[]" value="Mumps" tabindex="21"> Свинка
<input type="checkbox" name="his[]" value="Dizziness" tabindex="22"> Головокружение
<input type="checkbox" name="his[]" value="Sneezing" tabindex="23"> Кашель
</fieldset>
<fieldset>
<legend>Текущее лечение</legend>
Лечитесь ли Вы сейчас?<br>
<input type="radio" name="medi" value="Yes" tabindex="35">Да
<input type="radio" name="medi" value="No" tabindex="35">Нет<br>
Если Вы лечитесь, укажите ниже, как:<br>
<textarea name="cur_medi" rows="5" cols="50" tabindex="40"></textarea>
</fieldset>
</form>
</div>
</body>
</html>
|
Добавлено @ 01:01
Только с таким подходом прийдётся все переменные функции хранить в объекте funcData. Просто, если нужна новая переменная в функциях где будет юзаться псевдо-диалог, нужно их оформлять в виде полей объекта funcData. |
