Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Диалоговая форма

Автор: MD6 21.1.2009, 15:53

помогите плиз сделать диалоговую форму типа promtp тока это должно выглядить как страничка, т.е. например открывается страница главная и поверх ее диалоговое окно Введите имя, ввели, эта страничка закрылась и показалась главная.

Автор: bars80080 21.1.2009, 16:05

это модальные окна, действуют только в ИЕ, единственный кросбраузерный вариант - вешать поверх всей страницы слой с position: fixed; с формой посередине. но при желании человек его обойдёт

Автор: MD6 21.1.2009, 21:30

bars80080, а не подскажешь примерчик как повесить слой с формой? и как получить с этого слоя данные введенные на главной странице?

Автор: bars80080 21.1.2009, 22:13

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

Код


<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 правда работать не будет, там нужны корректировки, но это уже потом. слой находится внизу, чтобы гарантированно перекрыть всё. форма располагается примерно посередине, после проверок значение из формы пересылается в какое-нибудь другое поле, куда там надо нам его передать. (я правда, обычно делаю по-другому, у меня вообще одна форма на всю страницу).
если всё хорошо, то слой скрывается

Автор: MD6 21.1.2009, 22:35

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

<body>....</body> <script> сделать чтобы появился слой(диалоговая форма), ждем от нее данных, если все данные верны, т.е. например длина поля фио >10 то закрываем слой, далее тут в скрипте обрабатываются данные полученные</script>

Автор: bars80080 21.1.2009, 23:52

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

если хочется вообще не вставлять, то вешаем на событие 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; // ну здесь может придётся поизвращаться
};

Автор: Aliance 22.1.2009, 09:57

http://odrademos.webs.com/jqueryfloatbox.htm

Автор: NNaarreekk 22.1.2009, 10:34

Цитата(Aliance @ 22.1.2009, 11:57

)

http://odrademos.webs.com/jqueryfloatbox.htm

А как скачать код???
Или нужно из сорса красть?

Автор: Aliance 22.1.2009, 10:43

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

Цитата

Project page: http://plugins.jquery.com/project/floatbox

Это 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>

Автор: IDVsbruck 22.1.2009, 20:58

Неделю назад вышел новый jQuery и там в Core уде есть модальные окна типа Alert, Confirmation, Warning со всем функционалом и возможностью настраивать дизайн. Еще не пробовал, но описание понравилось.
Хотя это неправильный подход к веб-приложнию, но понимаю, что иногда все же есть надобность. Способ вроде очень работающий и полностью кроссбраузерный.

Автор: Aliance 23.1.2009, 10:13

Цитата(IDVsbruck @ 22.1.2009, 21:58

)

Хотя это неправильный подход к веб-приложнию

Поясните.