Модальное окно на HTML и CSS

Внедряем CSS в HTML. JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Модальное окно на HTML и CSS

Сообщение Slash » Сб дек 19, 2015 10:13 am

Здравствуйте.
Тут знакомый задавался вопросом о том, как сделать очень простое модальное окно на HTML и CSS и получилось, как он хотел!
Вот наверно самое модальное окно:
Ссылка для открытия окошка:

Код: Выделить всё

<a href="#openwindow">Открыть окно</a

Сам блок окна:

Код: Выделить всё

<div id="openwindow" class="window">
    <
div>
        
Тут контент
        
<br />
        <
a href="#">Закрыть</a>    
    </
div>            
</
div

И класс окна:

Код: Выделить всё

.window 
{
    
displaynone;
}

.
window:target 
{
    
displayblock;
}

.
window div 
{
    
width250px;
    
margin10auto;
    
padding15px;
    
positionabsolute;
    
background#DFDFDF;

Вот и все.

По желанию можно приукрасить свое окно, закруглить углы, затемнить страницу при появлении окна и выбрать место на странице, где должно появляться окошко и так далее.

Надеюсь информация была полезной.
Спасибо за внимание.
Реклама
Аватара пользователя
greendev
Сообщения: 79

Re: Модальное окно на HTML и CSS

Сообщение greendev » Вс дек 20, 2015 8:03 pm

Привет.
Я тоже как-то искал подобное, но с чтобы окно появлялось с задержкой.
Нашёл вот такой, достаточно простой вариант, простеньким оформлением и с применением javascript(для 5 секундной задержки):

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Создаем всплывающее окно при загрузке сайта с помощью CSS3 и немного javascript</title>
<
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<
link rel="stylesheet" href="css/styles.css" type="text/css" />
<
style>
/* Всплывающее окно */    
#parent_popup {
  
background-colorrgba(0000.8);
  
displaynone;
  
positionfixed;
  
z-index99999;
  
top0;
  
right0;
  
bottom0;
  
left0;
}
#popup { 
  
background#fff;
    
width520px;
    
margin10auto;
    
padding5px 20px 13px 20px;
    
border10px solid #ddd;
    
positionrelative;
    
/*--CSS3 CSS3 Тени для Блока--*/
    
-webkit-box-shadow0px 0px 20px #000;
    
-moz-box-shadow0px 0px 20px #000;
    
box-shadow0px 0px 20px #000;
    /*--CSS3 Закругленные углы--*/
    
-webkit-border-radius10px;
    -
moz-border-radius10px;
    
border-radius10px;
}
#popup h1{
    
font:28px ArialHelvetica,  sans-serif;
    
font-weightbold;
    
text-aligncenter;
    
color#008000;
    
text-shadow0 1px 3px rgba(0,0,0,.3);
    }
#popup h2{
    
font:24px ArialHelvetica,  sans-serif;      
    
color#008000;
    
text-alignleft;
    
text-shadow0 1px 3px rgba(0,0,0,.3);
    }
/* кнопка закрытия */
.pop-close {
    
background-colorrgba(0000.8);
    
border2px solid #ccc;
    
height24px;
    
line-height24px;
    
positionabsolute;
    
right: -24px;
    
cursorpointer;
    
font-weightbold;
    
text-aligncenter;
    
text-decorationnone;
    
colorrgba(2552552550.9);
    
font-size14px;
    
text-shadow-1px rgba(0000.9);
    
top: -24px;
    
width24px;
    -
webkit-border-radius15px;
    -
moz-border-radius15px;
    -
ms-border-radius15px;
    -
o-border-radius15px;
    
border-radius15px;
    -
moz-box-shadow1px 1px 3px #000;
    
-webkit-box-shadow1px 1px 3px #000;
    
box-shadow1px 1px 3px #000;
}
.
pop-close:hover {
    
background-colorrgba(01222000.8);
}
</
style>
</
head>
<
body>

<
div id="parent_popup">
  <
div id="popup">
<
h2>Уважаемые посетители!</h2>
<
p>Уведомляем Васчто в период с <strong>16 июня</strongпо <strong>23 июня</strong>, заказы по телефону и доставка товаров <strong>НЕ будут осуществляться.</strong></p>
<
p>Спасибо за понимание!</p>
<
class="pop-close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
</
div>
</
div>
<
script type="text/javascript">
    if (
document.cookie.indexOf('_visited=1') == -1){ var delay_popup 5000setTimeout("document.getElementById('parent_popup').style.display='block'"delay_popup); document.cookie '_visited=1; path=/';}
</script>

</body>
</html>


Вернуться в «HTML + CSS»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость