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

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

Форум программистов > JavaScript: Общие вопросы > всплывающее окно

Автор: godvinn 4.3.2009, 14:18

Привет всем. Есть такой вопрос:
Есть сайт, как сделать чтобы можно было вызвать окно c помощью клавиш клавиатуры, то есть при нажатии например Ctrl+Q появляется окно размером 300*500 с какойто информацией.

Автор: Soah 4.3.2009, 15:23

В Опере Ctrl+Q это выход, вот для Shift+Q

Код


<script type="text/javascript">
    document.onkeydown = function (event) {
        event = event || window.event;
        var keyCode = event.which || event.keyCode;

        if (event.shiftKey && keyCode == 81)
            window.open("idd.htm", "NewWindow", "width=300, height=500");
    }
</script>

Автор: godvinn 5.3.2009, 09:09

а как вместо window.open("idd.htm", "NewWindow", "width=300, height=500"); вставить модальное окно наподобие вот того (в приложениии)?

Автор: bars80080 5.3.2009, 10:32

открыть не окно, а скрытый слой. полупрозрачный iframe на весь экран для блокировки и сверху див, содержащий эту форму

Автор: godvinn 5.3.2009, 11:26

bars80080, а можешь примерчик привести ? Пожалуйста.

Автор: bars80080 5.3.2009, 11:51

что-то вроде такого:

Код


<style>
#odeka { display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;
    background: #fff8ff; filter: alpha(opacity=70, finishopacity=70); opacity: .7; }

#odeka iframe { width: 50%; height: 100%; }

#dop { display: none; position: fixed; left: 100px; top: 100px; width: 75%; background: #eeeeff; }
* html #dop { position: absolute; width: 150%; }
* html #odeka { position: absolute; width: 199%; height: 800px; }
* html #odeka iframe { width: 100%; }
</style>

<div id="odeka"><iframe></iframe></div>

<div id="dop">
... форма
</div>

только там надо посмотреть как ведут себя проценты ширины. я подгонял под свои запросы, а у меня почему-то получалось, что надо задать для ИЕ6 150% и 200%

#odeka { display: none;
#dop { display: none; - по-умолчанию не видны. javascript открывает по нажатию кнопки

Автор: godvinn 5.3.2009, 14:10

то есть вот такое должно выйти

Код


<html>

<head>

<script type="text/javascript">
    document.onkeydown = function (event) {
        event = event || window.event;
        var keyCode = event.which || event.keyCode;
        if (event.shiftKey && keyCode == 81)
    {
        document.getElementById("dop");
    }
            
    }
</script>

<style>
    #odeka { display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;
    background: #fff8ff; filter: alpha(opacity=70, finishopacity=70); opacity: .7; }
    #odeka iframe { width: 50%; height: 100%; }
    #dop { display: none; position: fixed; left: 100px; top: 100px; width: 75%; background: #eeeeff; }
    * html #dop { position: absolute; width: 150%; }
    * html #odeka { position: absolute; width: 199%; height: 800px; }
    * html #odeka iframe { width: 100%; }
</style>    
    
</head>

<body>

<div id="odeka"><iframe></iframe></div>

<div id="dop">
... форма
</div>

</body>

</html>

Автор: bars80080 5.3.2009, 14:25

я так понимаю:

Код


        if (event.shiftKey && keyCode == 81)
    {
        document.getElementById("odeka").style.display = 'block';
        document.getElementById("dop").style.display = 'block';
    }

Автор: Photon 5.3.2009, 18:58

Нафиг писать что-то свое для вывода модальных окон, если есть вещи типа jQuery или MooTools?

В случае с jquery это будет так:

Подключаем jquery.js и impromptu.js (плагин для jQuery), а также impromptu.css

А потом:

Код


document.onkeydown = function (event) {
   event = event || window.event;
   var keyCode = event.which || event.keyCode;

   if (event.shiftKey && keyCode == 81) {
      $.prompt('Тут нужное содержимое окна в виде HTML', {buttons: {'Ok': true, 'Cancel': false}, callback: fn_CallBack});
      function fn_CallBack (v,m) { 
          if (!v) return false;
/*
                 тут какие-нить полезные действия
                 например, отправка данных формы, которая была выведена в диалоговом окне
                 примерно так:
                 var form = m.find('#myForm');
                 form.submit();                 

*/
      }
   }
}

Автор: bars80080 5.3.2009, 21:27

Цитата(Photon @ 5.3.2009, 17:58

)

Нафиг писать что-то свое для вывода модальных окон, если есть вещи типа jQuery или MooTools?

а нафиг использовать jQuery или MooTools, если можно написать самому?

Автор: godvinn 6.3.2009, 12:11

bars80080, А как добавить кнопку кенсел чтобы закрывалось это окно ? нужно window.close()?
все уже разобрался ))) smile

Автор: godvinn 6.3.2009, 13:22

зкрываю окно вот так

Код


    document.getElementById("odeka").style.display = 'none';
    document.getElementById("form_send").style.display = 'none';

но, если пользователь ничего не вводит в форму ему постоянно вылезает сообщение о том что вы не отправли данные хотите отправить ? как сделать чтобы этого сообщения не было?

Автор: Photon 7.3.2009, 00:35

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

Автор: bars80080 7.3.2009, 00:44

Цитата(Photon @ 6.3.2009, 23:35

)

Особенно при неверном написании той части кода, которая работает с этой формой..

так же как при неверном написании вызова вашего метода от jquery. причём, чем универсальней плагин, тем тяжелее он для модификаций под нестандартные решения

пример прост: кнопка "код" в форме этого форума. до сих пор её не могут модифицировать в две колонки. библиотека, так её и так