Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Диалоговая форма 
:(
    Опции темы
MD6
Дата 21.1.2009, 15:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 28.8.2008

Репутация: нет
Всего: нет



помогите плиз сделать диалоговую форму типа promtp тока это должно выглядить как страничка, т.е. например открывается страница главная и поверх ее диалоговое окно Введите имя, ввели, эта страничка закрылась и показалась главная.
PM MAIL   Вверх
bars80080
Дата 21.1.2009, 16:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315



это модальные окна, действуют только в ИЕ, единственный кросбраузерный вариант - вешать поверх всей страницы слой с position: fixed; с формой посередине. но при желании человек его обойдёт
PM MAIL WWW   Вверх
MD6
Дата 21.1.2009, 21:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 28.8.2008

Репутация: нет
Всего: нет



bars80080, а не подскажешь примерчик как повесить слой с формой? и как получить с этого слоя данные введенные на главной странице?
PM MAIL   Вверх
bars80080
Дата 21.1.2009, 22:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315



ну, слой делается просто:

Код

<style>
html, body { width: 100%; html: 100%; }
#backplan { position: fixed; width: 100%; height: 100%; background: #ffffff; opacity: .5; }
#backplan div { position: absolute; width: 400px; height: 300px; left: 35%; top: 30%; background: #eeeeee; }
</style>
<script>
function insName() {
    var qw = document.getElementById('idfname').value;
    // здесь всякие нужные проверки 
    if($flag) {
        document.getElementById('other_field').value = qw;
        document.getElementById('backplan').style.display = 'none';
    }
    else { alert('вы не сделали то-то'); return; }
}
</script>
...
<div id="backplan">
<div>
<p>Введите имя:</p>
<input name="fname" id="idfname" />
<input type="button" value="ОК" onclick="insName();" />
</div>
</div>
</body>
в общих чертах так. в ИЕ6 правда работать не будет, там нужны корректировки, но это уже потом. слой находится внизу, чтобы гарантированно перекрыть всё. форма располагается примерно посередине, после проверок значение из формы пересылается в какое-нибудь другое поле, куда там надо нам его передать. (я правда, обычно делаю по-другому, у меня вообще одна форма на всю страницу).
если всё хорошо, то слой скрывается
PM MAIL WWW   Вверх
MD6
Дата 21.1.2009, 22:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 28.8.2008

Репутация: нет
Всего: нет



это все хорошо, вот только одно НО, есть главная страница, в ней я ничего менять не хочу, а хочу чтобы этот слой показывался скриптом, т.е. 

<body>....</body> <script> сделать чтобы появился слой(диалоговая форма), ждем от нее данных, если все данные верны, т.е. например длина поля фио >10 то закрываем слой,  далее тут в скрипте обрабатываются данные полученные</script>
PM MAIL   Вверх
bars80080
Дата 21.1.2009, 23:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315



ну, и что не так? код добавляется в самый конец

если хочется вообще не вставлять, то вешаем на событие onload страницы вставку слоя:

Код

window.onload = function(){
    var txt = '<div id="backplan"><div><p>Введите имя:</p><input name="fname" id="idfname" />';
    txt += '<input type="button" value="ОК" onclick="insName();" /></div></div>';
    document.body.innerHTML += txt; // ну здесь может придётся поизвращаться
};

PM MAIL WWW   Вверх
Aliance
Дата 22.1.2009, 09:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



PM MAIL WWW ICQ Skype   Вверх
NNaarreekk
Дата 22.1.2009, 10:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 768
Регистрация: 23.6.2007
Где: Армения

Репутация: 2
Всего: 3



Цитата(Aliance @  22.1.2009,  11:57 Найти цитируемый пост)
http://odrademos.webs.com/jqueryfloatbox.htm 

А как скачать код???
Или нужно из сорса красть?
PM MAIL WWW   Вверх
Aliance
Дата 22.1.2009, 10:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



Там же все написано:


Это JQuery плагин, чтобы им пользоваться нужно подключить сам JQuery, затем плагин (который можно скачать по ссылке выше), и использовать.

Я например у себя на сайте заменил стандартную функцию alert:
Код

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.floatbox.js"></script>
<script type="text/javascript">
window.alert = function( content )
{
    $.floatbox(
        {
            content: content,
            fade: true
        }
    );
}
</script>
</head>
<body>
<a href='javascript:alert('test me<br />&copy;Vingrad');'>floatbox test</a>
</body>

PM MAIL WWW ICQ Skype   Вверх
IDVsbruck
Дата 22.1.2009, 20:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 7
Всего: 22



Неделю назад вышел новый jQuery и там в Core уде есть модальные окна типа Alert, Confirmation, Warning со всем функционалом и возможностью настраивать дизайн. Еще не пробовал, но описание понравилось.
Хотя это неправильный подход к веб-приложнию, но понимаю, что иногда все же есть надобность. Способ вроде очень работающий и полностью кроссбраузерный.
PM MAIL   Вверх
Aliance
Дата 23.1.2009, 10:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



Цитата(IDVsbruck @  22.1.2009,  21:58 Найти цитируемый пост)
Хотя это неправильный подход к веб-приложнию

Поясните.
PM MAIL WWW ICQ Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.0505 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.