Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.09.2019, 17:30
Аспирант
Отправить личное сообщение для misha.korolcov Посмотреть профиль Найти все сообщения от misha.korolcov
 
Регистрация: 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">&times;</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. Причина: забил
Ответить с цитированием
  #2 (permalink)  
Старый 27.09.2019, 11:53
MOT MOT вне форума
Аспирант
Отправить личное сообщение для MOT Посмотреть профиль Найти все сообщения от MOT
 
Регистрация: 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>
Ответить с цитированием
  #3 (permalink)  
Старый 27.09.2019, 12:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

MOT,
добавьте параметр run
[HTML run][/HTML]



О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #4 (permalink)  
Старый 27.09.2019, 18:03
MOT MOT вне форума
Аспирант
Отправить личное сообщение для MOT Посмотреть профиль Найти все сообщения от MOT
 
Регистрация: 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>
Ответить с цитированием
  #5 (permalink)  
Старый 27.09.2019, 18:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод информации в модальное окно frack Общие вопросы Javascript 2 04.08.2016 11:46
Модальное окно. Salvat Элементы интерфейса 4 25.02.2016 09:33
Bootstrap модальное окно igor.3dviz Общие вопросы Javascript 1 09.02.2014 13:27
модальное окно div'ом codingfighter Общие вопросы Javascript 28 03.09.2013 15:07
Как передать переменную в модальное окно sinsir jQuery 24 20.06.2013 16:59