Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 25. Создание всплывающего окна
Не нравится(-) 116 Нравится(+)
22-03-2009, 12:12 - GZ Design (Уроки CSS)
Урок CSS 25. Создание всплывающего окна

Здравствуйте уважаемые посетители Российской школы CSS! Сегодня, мы возобновляем полноценную работу ресурса. Начнем с довольно простого, но весьма полезного урока CSS. Сейчас - мы попробуем создать всплывающее окно с помощью HTML и CSS.
Итак, приступим к созданию.

Мы не будем использовать изображения в этом уроке, а значит, по традиции, создаём файлы index.html и style.css"scriptcode"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=cp-1251">
<title>Российская школа CSS. Урок CSS 25. Создание всплывающего окна</title>
<link rel="stylesheet" href="style.css"scriptcode"><a href="#" onclick="document.getElementById('wind').style.display='block'; return false;" title="Всплывающее окно">Открыть меню</a>

Замечу, что wind - название стиля блока с окном. Зададим его и закончим работу с файлом:
<div id="wind">
Содержание всплывающего окна.
<button type="button" value="закрыть" onclick="document.getElementById('wind').style.display='none'; return false;">
закрыть</button>
</div>
</body>
</html>


Здесь - всё. Теперь создадим в той же директории файл стилей style.css"scriptcode">/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://css-school.ru
Урок CSS №25. Создание всплывающего окна
style.css"a" здесь только для оформление ссылки, вызывающей окно.

Использовать эти окна можно для множества целей: создание меню для сайта, не занимающего места на странице, создание полей авторизации, регистрации, добавления комментариев и т.д.

Вот и всё. Надеюсь урок оказался полезным и понятным для Вас. Спасибо за внимание!


Автор урока: Григорий Загребельный, Российская школа CSS
Совместимость: Internet Explorer 5 - 7; Mozilla Firefox 1.xx - 3.xx Opera 7.хх - 9.xx.


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 85870 раз(а) и написали 21 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Июль 2019    »
ПнВтСрЧтПтСбВс
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!