Как сделать всплывающее окно

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

Вам понадобится

Базовые познания языка HTML.

Инструкция

1. всплывающее окно, HTML-код, спрятанный слой

2. На многих страницах в сети дозволено увидеть, что для создания в страницах всплывающих окон привлекаются навороченные библиотеки разных JavaScript-фреймворков (jQuery, MooTools, Prototype и т.д.). Впрочем на самом деле в них нет необходимости при решении именно этой задачи. Для создания всплывающих окон абсолютно довольно средств, имеющихся в языке разметки гипертекста (HTML) и языке изложения каскадных таблиц жанров (CSS). Создаваемые этим методом окна будут трудиться самостоятельно от того, включена ли в браузере посетителя помощь JavaScript.Каждый код, создающий всплывающее окно дозволено поместить в 2-х строках. Первая строка создает ссылку, которую нужно щелкнуть, дабы отобразилось всплывающее окно:<a onmouseover=’this.style.cursor=”pointer” ‘ onfocus=’this.blur();’ onclick=”document.getElementById(‘PopUp’).style.display=’block'”><span style=”text-decoration: underline;”>Щелкать тут!</span></a>Тут признак onmouseover тега ссылки задает типовой для ссылок тип курсора при наведении мыши. Признак onclick указывает, что при щелчке по ссылке спрятанный блок с идентификатором PopUp должен стать видимым.Вторая строка – это, собственно, и есть всплывающее окошко. Слой с идентификатором PopUp и заданными в признаке style размерами окна, цветом и размером текста, фона и рамки:<div id=’PopUp’ style=’display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 135px;’>Это текст во всплывающем окне</div>По умолчанию он не виден – на это указывает селектор display со значением none в изложении жанра слоя.Собственно, это и все что необходимо для создания всплывающего окна – поместите эти два строки между тегами <body> и </body> вашей страницы и оно готово к работе.

3. Дабы иметь вероятность закрыть всплывающее окно перед тегом </div> необходимо добавить ссылку, исполняющую обратное действие – скрывающую видный слой с идентификатором PopUp:<br /><div style=’text-align: right;’><a onmouseover=’this.style.cursor=”pointer” ‘ style=’font-size: 12px;’ onfocus=’this.blur();’ onclick=”document.getElementById(‘PopUp’).style.display = ‘none’ ” ><span style=”text-decoration: underline;”>закрыть</span></a></div>

4. А если вы хотите, дабы окошко всплывало не по щелчку, а при наведении курсора мыши, то первую строку со ссылкой необходимо модифицировать таким образом:<a onmouseover=”document.getElementById(‘PopUp’).style.display = ‘block’ ” onmouseout=”document.getElementById(‘PopUp’).style.display = ‘none’ ” onfocus=’this.blur();’><span style=”text-decoration: underline;”>навести мышь сюда!</span></a>

5. С тезисом и конструкцией кода всплывающего окна вы сейчас знакомы, а оформление его внешнего вида и содержимого целиком зависит от ваших целей и фантазии.