Модальное окно написанное на чистом JavaScript коде. Две строчки JS кода для полноценного модального окна.
Автор: © web-rubik
1913 Просмотры
0 Понравилось
Предположим у нас есть HTML и CSS модального окна, где по умолчанию оно отключено.
<!DOCTYPE html>
<html>
<head>
<title>Модалльное окно на JS и HTML 5</title>
<meta charset="UTF-8">
<link href="css/web-rubik.style.css" rel='stylesheet' type='text/css' />
</head>
<body>
<p id="open" title="Открыть">Открыть модалльное окно</p>
<!-- Модальное окно -->
<div id="modal" class="modal" style="display:none;">
<div class="modalBody">
<div class="modalHead">
Закрыть <span id="close" class="close">×</span>
</div>
<div class="modalContent">
<p><strong>О! Всё работает..</strong></p>
</div>
</div>
</div>
</body>
</html>И таблица стилей CSS
#open {
margin:20px;
cursor:pointer;
}
/* Модальное окно ***/
.modal {
position:fixed;
z-index:1;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgba(0, 0, 0, 0.3);
}
.modalBody {
background-color:#fefefe;
margin:15% auto;
margin-top:8%;
width:50%;
border:1px solid #e8e8e8;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
-khtml-border-radius:10px 10px 10px 10px;
behavior: url(border-radius.htc);
}
.modalHead {
color:#aaa;
border-bottom:1px solid #e8e8e8;
padding:10px;
padding-left:15px;
padding-right:15px;
}
.close {
color:#aaa;
float:right;
font-size:28px;
font-weight:bold;
cursor:pointer;
}
.modalContent {
padding:10px;
padding-left:15px;
padding-right:15px;
}
.modalFooter {
border-top:1px solid #e8e8e8;
padding:10px;
padding-left:15px;
padding-right:15px;
padding-bottom:50px;
}Тут всё я думаю понятно, есть кнопка, которая пока никуда не ведёт, но мы хотим, что бы при клике открывалось модальное окно расположенное ниже. У div модального окна стоит атрибут style="display:none;", по этому, нам нужно на JS это отменить.
JS код модального окна
<script type="text/javascript">
$("#open").click(function () { $("#modal").fadeIn(1000); });
$("#close").click(function () { $("#modal").fadeOut(200); });
</script>Одним действием мы открываем модальное окно, другим закрываем. На этом у меня всё, если будет чего не понятно пишите в комментариях..
Понравилось 0
Комментариев нет или
Оставить комментарий
Оставленные комментарии проверяются технической частью интернет портала Web-rubik.ru