Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АрхитектураБиологияГеографияДругоеИностранные языки
ИнформатикаИсторияКультураЛитератураМатематика
МедицинаМеханикаОбразованиеОхрана трудаПедагогика
ПолитикаПравоПрограммированиеПсихологияРелигия
СоциологияСпортСтроительствоФизикаФилософия
ФинансыХимияЭкологияЭкономикаЭлектроника

Урок CSS 25. Создание всплывающего окна

Читайте также:
  1. Автоматическое создание раскройных карт
  2. Атрибуты, создание собственного класса атрибута
  3. Б) создание условий для занятия трудовой деятельностью;
  4. Бриф на создание Landing Page
  5. Бриф на создание многостраничного сайта-визитки
  6. Бриф на создание сайта
  7. Вакуум и создание устройств с пневматической и пароатмосферной тягой

22-03-2009, 12:12 - GZ Design (Уроки CSS)


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

Мы не будем использовать изображения в этом уроке, а значит, по традиции, создаём файлы index. html и style.css.
В код html страницы записываем стандартный начальный код для HTML 4.01:

 

<!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" type="text/css">
</head>
<body>


Теперь необходимо создать ссылку на открытие (вызов) нашего окна.

 

<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 и запишем туда такие стили:

 

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №25. Создание всплывающего окна
style.css - Набор стилей для урока
=============================================================
*/

a {
text-decoration:none;
color:#03508c;
font-weight:bold;
font-size:16px;
}

#wind {
position: absolute;
width:320px;
left: 35%;
top: 100px;
border:solid #105a98 4px;
display: none;
z-index: 10;
overflow: hidden;
background-color:#348c03;
color:#fff;
text-align:center;
padding:10px;
}


Стиль "a" здесь только для оформление ссылки, вызывающей окно.

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

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


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

 


Дата добавления: 2015-07-20; просмотров: 121 | Нарушение авторских прав


<== предыдущая страница | следующая страница ==>
с номерами вопросов для подготовки презентаций| Лабораторная работа № 5. Вставка специальных символов

mybiblioteka.su - 2015-2024 год. (0.005 сек.)