19.09.2019, 17:30
|
Аспирант
|
|
Регистрация: 05.09.2019
Сообщений: 84
|
|
модальное окно
Доброе время суток есть модальное окно будстрапа
<div class="modal fade "
id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog " role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Запустить модальное окно
</button>
я хочу сменить анимацию появления через css анимацию класом wow
zoomIn" data-wow-duration=".4s" data-wow-delay="1.4s"
но у меня не виходит не могу понять где ошибка
Последний раз редактировалось misha.korolcov, 19.09.2019 в 17:32.
Причина: забил
|
|
27.09.2019, 11:53
|
Аспирант
|
|
Регистрация: 30.08.2019
Сообщений: 52
|
|
Можно сделать по-другому:
<body>
<aside class="modal" id="modal">
<header>
<h2>Заголовок модального окна</h2>
</header>
<section>
</section>
<footer class="footer">
<a href="#" class="btn ma">Закрыть</a>
</footer>
</aside>
<style>
body {
font-weight: 300;
}
/* Стили для неактивного модального окна */
.modal {
background: #fff;
left: 40%;
margin: -250px 0 0 -40%;
position: absolute;
top: -50%;
width: 100%;
border-radius: 5px;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 7px rgba(0,0,0,.25);
-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* Активация модального окна в состоянии :target */
.modal:target {
top: 50%;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
.modal header, .modal footer {
background: #f7f7f7;
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}
.modal footer {
border:none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
.modal section, .modal header, .modal footer {
padding: 15px;
z-index: 200;
}
.modal h2 {
margin: 0;
}
.modal .btn {
float: right;
}
h2 {
font-weight: 300;
}
.ma {
color: red;
text-decoration: none;
}
</style>
<a href="#modal">Открыть модальное окно</a>
</body>
|
|
27.09.2019, 12:16
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
MOT,
добавьте параметр run
[HTML run][/HTML]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
27.09.2019, 18:03
|
Аспирант
|
|
Регистрация: 30.08.2019
Сообщений: 52
|
|
<body>
<aside class="modal" id="modal">
<header>
<h2>Заголовок модального окна</h2>
</header>
<section>
</section>
<footer class="footer">
<a href="#" class="btn ma">Закрыть</a>
</footer>
</aside>
<style>
body {
font-weight: 300;
}
/* Стили для неактивного модального окна */
.modal {
background: #fff;
left: 40%;
margin: -250px 0 0 -40%;
position: absolute;
top: -50%;
width: 100%;
border-radius: 5px;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 7px rgba(0,0,0,.25);
-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* Активация модального окна в состоянии :target */
.modal:target {
top: 50%;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
.modal header, .modal footer {
background: #f7f7f7;
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}
.modal footer {
border:none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
.modal section, .modal header, .modal footer {
padding: 15px;
z-index: 200;
}
.modal h2 {
margin: 0;
}
.modal .btn {
float: right;
}
h2 {
font-weight: 300;
}
.ma {
color: red;
text-decoration: none;
}
</style>
<a href="#modal">Открыть модальное окно</a>
</body>
|
|
27.09.2019, 18:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
MOT,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<aside class="modal" id="modal">
<header>
<h2>Заголовок модального окна</h2>
</header>
<section>
</section>
<footer class="footer">
<a href="#" class="btn ma">Закрыть</a>
</footer>
</aside>
<style>
body {
font-weight: 300;
}
/* Стили для неактивного модального окна */
.modal {
background: #fff;
left: 40%;
margin: -250px 0 0 -40%;
position: absolute;
top: -50%;
width: 100%;
border-radius: 5px;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 7px rgba(0,0,0,.25);
-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* Активация модального окна в состоянии :target */
.modal:target {
top: 50%;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
.modal header, .modal footer {
background: #f7f7f7;
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}
.modal footer {
border:none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
.modal section, .modal header, .modal footer {
padding: 15px;
z-index: 200;
}
.modal h2 {
margin: 0;
}
.modal .btn {
float: right;
}
h2 {
font-weight: 300;
}
.ma {
color: red;
text-decoration: none;
}
</style>
<a href="#modal">Открыть модальное окно</a>
</body>
</html>
|
|
|
|