Java-script. класс диалогового окна "ModalBox"
Что есть:
для появляющегося диалогового окна (далее wlModalbox) использую: (см. вложение «window-modal-message.zip»)
пример готового решения: http://www.dhtmlgoodies.com/scripts/modal-message/demo-modal-message.html - понажимайте на ссылки
Что надо:
- сделать класс на javascript `wlModalbox` с использованием AJAX библиотеки Дмитрия Котерова `JsHttpRequest.js` (эту библиотеку уже давно использую - оч. удобно и она есть в наличии)
- диалоговое окно появляется при нажатии
- под ним ничего не работает, особенно ссылки
- на него ничего не должно залазить сверху, ни SELECT-ы, ни флеш, ни другие блоки
- текст который помещается в wlModalbox может содержать не только текст, но и HTML и картинки и сылки и другие теги
- параметром в классе явно указывать элементы для обработки (что бы не юзать весь документ - для ускорения, например только ссылки и картинки).
- конфиг тоже подойдет: wlModalbox.config.js
- при наведении вторично - данные уже не запрашиваются, а берутся из кеша (в `JsHttpRequest.js` уже встроено кеширование, на всякий случай пишу), но для каждого надо еще эту подстройку отдельно что бы переть можно было - см. ниже
- размер по высоте должен высчитываться автоматически в зависимости от наполненности внутри, но не меньше чем заданная высота в параметрах!
- окно должно всегда центрироваться относительно центра экрана
- обработка всех елементов, у которых есть теговый параметр `wlModalTxt="что-то"` или `wlModalCnfrm="что-то"` или `wlModalAjax="что-то"`, он не должен быть пустым.
- обработку `wlModalbox` надо вставить в onload документа. Можно использовать удачное решение обработки тегов при инициализации класс, т.е. после загрузки документа:
.on(window,'load'.....
- также хотелось бы использовать такие параметры для настройки работы класса:
wlModalbox.options={
phpPath : 'wlModalbox.php', // путь к испольняющему файлу
csh : true, // кешировать данные или нет
funcNameCallBack : 'this.funcname', // Очень важная штука, так как для каждого Ajax-овского wlModalbox-а может быть своя обратная фунция, в зависмости от того, что в нем делается сюда передается только название функции, а в неё приходи объект result (который создается в wlModalbox.php)
tagParamNameTextOk : "wlModalTxt", // наименование создаваемого wlModalbox-ного атрибута
tagParamNameConfirm : "wlModalCnfrm", // наименование создаваемого wlModalbox-ного атрибута
tagParamNameAjax : "wlModalAjax", // наименование создаваемого wlModalbox-ного атрибута
divId : "wlModalbox", // наименование создаваемого скрытого слоя для wlModalbox
width : 250, // максимальная ширина wlModalbox-а в пикселах; 0 если авто
tags : [] , // Список обрабатываемых тэгов, если пусто то все
template : '/*{text}{load_info}*/' // Шаблон содержимого блока пока идет подгрузка Ajax
};
- исчезание wlModalbox происходит либо при нажатии на кнопку закрытия (она находится сверху справа в углу окна), либо при вызове функ-ии закрытия, например: wlModalbox.Cl() или при нажатии кнопки "Esc"
- классом создается `DIV` для показа появляющейся подсказки в документе, но он скрыт (...document.createElement("DIV")...)
- нужна возможность пересылки новых параметров в modalbox, в случае если на странице есть несколько разных. например:
Простое сообщение
Простое сообщение
обработки на стороне сервера и передача форматированного текста, например формы регистрации посетителя с полями ввода и выпадающими списками
как видите, я передал новые параметры (объект `wlOptions`) только ширину и новый ID-шник, а остальные данные должны браться из тех что указаны по-умолчанию в конфиге наверное (wlOptions - я не случайно добавил `wl` - это на случай конфликтов переменных)
- нужна возможность использования стилей для оформления подсказки, поэтому надо использовать `divId`, а в файле стилей: #wlModalbox{...}
Пример использования:
Простое сообщение
Простое сообщение
обработки на стороне сервера и передача форматированного текста, например формы регистрации посетителя с полями ввода и выпадающими списками