Всплывающее окно на CSS

Ранее я писала о разных вариантах реализации всплывающего окна для сайта. Видимо всплывающее окно – это очень актуальная тема, так как статья является самой популярной на моем сайте. Позже я наткнулась на очень хороший вариант всплывающего окна выполненном на чистом CSS. По ссылке указанной в Источнике вы найдете вариант всплывающего окна при загрузке страницы. Работает отлично, а главное без плагинов. Такой вариант я использую и на этом сайте. Это лучший вариант, который мне удалось найти в интернете. А потом я нашла еще один вариант

Немного модифицировав CSS, предлагаю Вам два варианта всплывающего окна на CSS при клике на ссылку. Конечно без Javascript события onclick обойтись не удалось, но все остальное это только CSS.

Выглядят окна так:

ВАРИАНТ 1 – Нажмите на ссылку

ВАРИАНТ 2 – Нажмите на ссылку

Устанавливаются эти окна очень просто. Для этого нужна соответствующая HTML разметка с применением нужных идентификаторов и CSS стили, соответствующие ей.

HTML

HTML состоит их двух частей:
– ссылки на окно;
– собственно самого окна

Важно! Менять разметку окон нельзя иначе оно не будет работать.
Само окно может быть размещено на странице где угодно.

Вариант 1

<!-- ССЫЛКА НА ОКНО -->
<a  (0)" >
 Вариант 2

<!-- ССЫЛКА НА ОКНО -->
<a  (0)" >
CSS
Но окно не будет работать без стилей CSS. Именно они отвечают за вид окна, за его появление и исчезание.
 
Больше статей:  Вид изображений на страницах сайта uCoz
Стили для Варианта 1
 
/* Всплывающее окно */ 

.parent_popup, .parent_popup_click {
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.popup, .popup_click { 
  background: #fff;
    max-width: 600px;
    width:70%;
    margin: 5% auto;
 padding: 5px 20px 13px 20px;
 border: 10px solid #ddd;
 position: relative;
 /*--CSS3 CSS3 Тени для Блока--*/ -webkit-box-shadow: 0px 0px 20px #000;
 -moz-box-shadow: 0px 0px 20px #000;
 box-shadow: 0px 0px 20px #000;
 /*--CSS3 Закругленные углы--*/ -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
}


.popup h2, .popup_click h2 {
    font:28px Monotype Corsiva, Arial;
    font-weight: bold;
 text-align: center;
 color: #008000;
 text-shadow: 0 1px 3px rgba(0,0,0,.3);
 }
.popup h3, .popup_click h3 {
    font:24px Monotype Corsiva, Arial;      
 color: #008000;
 text-align: left;
 text-shadow: 0 1px 3px rgba(0,0,0,.3);
 }
/* кнопка закрытия */.close {
    background-color: rgba(0, 0, 0, 0.8);
 border: 2px solid #ccc;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: -24px;
 cursor: pointer;
    text-align: center;
    text-decoration: none;
 color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-family: helvetica, arial;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    top: -24px;
    width: 24px;
 -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
 -moz-box-shadow: 1px 1px 3px #000;
 -webkit-box-shadow: 1px 1px 3px #000;
 box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background-color: rgba(255, 69, 0, 0.8);
}
 
Стили для Варианта 2
 
.modal {
    display: none; /* Hidden by default */    position: fixed; /* Stay in place */    z-index: 99999; /* Sit on top */    padding-top: 100px; /* Location of the box */    left: 0;
    top: 0;
    width: 100%; /* Full width */    height: 100%; /* Full height */    overflow: auto; /* Enable scroll if needed */    background-color: rgba(0, 0, 0, 0.8);
}

/* Modal Content */.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
}

/* The Close Button */.closess {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.closess:hover,
.closess:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
 
В этих стилях объединены вместе стили вплывающего окна при клике на ссылку и стили всплывающего окна при загрузке страницы.
 
Больше статей:  Оформление CSS формы входа для плагина Profile Builder
Всплывающее окно при загрузке страницы
 
Если вы хотите, чтобы такое окно появлялось при загрузке страницы, тогда нужно удалить ссылку на окно
 
<!-- ССЫЛКА НА ОКНО -->
<a  (0)" >
а перед закрывающемся тегом </body> добавить следующий javascript:
 
<script type="text/javascript">
$(function(){
if (document.cookie.indexOf('_visited=1') == -1) {
var delay_popup = 5000;
setTimeout("document.getElementById('parent_popup_click1').style.display='block'", delay_popup);
document.cookie = '_visited=1; path=/';
}
});
</script>