Віконце, що з'являється при відкритті сторінки
Скрипт прописаний в <header>
<script type="text/javascript">alert('Hello')</script>
Віконце, що викликається через посилання Віконце із кнопкою, що викликається через посилання
Стилі
/*1. Позиционуємо і центрируємо випливаюче віконце приховування віконця наслідується від батьківського елементу <a>*/ #window1-style_after{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } /*2. Приховуємо посилання з віконцем, позиціонуємо і розтягуємо на всю ширину вікна браузера*/ #window1-style-before{ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*3. Відображення випливаючого віконця після переходу до нього за посиланням*/ #window1-style-before:target {display: block;} /*1. Позиционуємо і центрируємо випливаюче віконце приховування віконця наслідується від батьківського елементу */ #window2-style-after{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } /*2. Стиль кнопки*/ .button2-style{ border: 1px solid #0000cc; padding: 0 12px; margin: 10px; text-decoration: none; background: #f2f2f2; } .button2-style:hover{background: #e6e6ff;} /*3. Приховуємо посилання з віконцем, позиціонуємо і розтягуємо на всю ширину вікна браузера*/ #window2-style-before{ display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; /***для затемнення сторінки: */ background: rgba(102, 102, 102, 0.5); } /*4. Відображення випливаючого віконця після переходу до нього за посиланням*/ #window2-style-before:target {display: block;}
HTML-теги
<a href="#window1-style-before">Посилання для виклику випливаючого віконця</a> <a href="#" id="window1-style-before"> <div id="window1-style_after" class="window">Текст віконця.<br>Щоб приховати, натисніть на будь-яке місце у вікні браузера</div> </a> <div id="window2-style-before"> <div id="window2-style-after" class="window"> Текст віконця. Якщо хочете закрити - натисніть на кнопку <a href="#" class="button2-style">Кнопка</a> </div> </div> <a href="#window2-style-before">Посилання для виклику випливаючого віконця з текстом і кнопкою</a>
Результат
Посилання для виклику випливаючого віконця
Текст віконця.
Щоб приховати, натисніть на будь-яке місце у вікні браузера
Текст віконця. Якщо хочете закрити - натисніть на кнопку Кнопка
Посилання для виклику випливаючого віконця з текстом і кнопкою