Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
caesarnn
54 / 54 / 18
Регистрация: 22.05.2015
Сообщений: 608
1

Как заставить форму появляться плавно?

22.11.2016, 20:51. Просмотров 370. Ответов 7
Метки нет (Все метки)

Здравствуйте! Такой вопрос: как заставить div с формой плавно появляться на странице?
Есть форма:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="md-modal" id="modal-1">
      <div class="md-content">
        <h3>Редактирование сайта <?=$name?></h3>
        <div>
        <form method="post">
        <span>Имя сайта</span>
        <br><input type="text" name="name" value="yandex.ru">
        <br><span>Алиасы сайта</span>
        <br><input type="text" name="alias" value="yandex.com">
        <br><span>Кодировка сайта</span>
        <br><input type="text" name="charset" value="utf-8">
        <br><span>Email администратора сайта</span>
        <br><input type="text" name="email" value="support@yandex.ru">
        <br><span>Индексные файлы сайта</span>
        <br><input type="text" name="indexfiles" value="index.php">
        <br><input type="submit" name="save" value="Сохранить">
    </form>
          <button class="md-close">Close me!</button>
        </div>
      </div>
    </div>
её CSS код:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    transition:5s;
    -webkit-animation: fade-in 3s linear; /* Safari 4+ */
  -moz-animation: fade-in 3s linear; /* Fx 5+ */
  -o-animation: fade-in 3s linear; /* Opera 12+ */
  animation: fade-in 3s linear; /* IE 10+, Fx 29+ */
Как сделать так, чтобы она появлялась плавно?
Код в песочнице
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
22.11.2016, 20:51
Ответы с готовыми решениями:

Есть ли способ плавно вывести бордер при наведении, ну и плавно скрыть
Необходимо плавно вывести границу при наведении, и плавно чтобы скрывалась если убрать курсор. Что...

Заставить работать форму отправки E-Mail
В интернете набрел на хороший бесплатный шаблон, собственно все сделал под себя, только вот форму...

Заставить работать форму отправки E-Mail
Доброго времени суток,столкнулся с проблемой,что обратная форма связи не работает,я так понимаю нет...

Как заставить появляться скролл не в Grid, а в ListBox?
Добрый день! Не могу справиться с простейшей разметкой. При выводе данных в ListBox, когда их...

Как заставить рисунок появляться в теле сообщения?
Отправляю CDONTом HTML страницу для отображения в body. Прикрепляю файл рисунка, который размещен в...

7
abrdabr
Заблокирован
22.11.2016, 20:57 2
caesarnn, использовать js?
0
caesarnn
54 / 54 / 18
Регистрация: 22.05.2015
Сообщений: 608
22.11.2016, 21:01  [ТС] 3
Цитата Сообщение от abrdabr Посмотреть сообщение
использовать js?
можно более подробно?
0
abrdabr
Заблокирован
22.11.2016, 21:06 4
caesarnn, в какой именно момент она должна разворачиватся?

 Комментарий модератора 
Не отсылайте других пользователей в поиск и избегайте ссылок на поисковые системы (Google, Yandex и др.). Самостоятельно найдите ответ на вопрос и разместите его на форуме.
0
22.11.2016, 21:06
mrtoxas
Модератор
Эксперт HTML/CSS
2919 / 2133 / 1311
Регистрация: 12.07.2015
Сообщений: 5,734
Записей в блоге: 3
22.11.2016, 21:09 5
abrdabr, без скриптов никак?
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.md-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  width: 50%;
  max-width: 630px;
  min-width: 320px;  
  z-index: 2000;
  transition: opacity 3s linear;
  opacity: 0;
  height:0;
  overflow: hidden;
}
 
.md-modal:target {
  height:auto;
  opacity: 1;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<a href="#modal-1">Open</a>
<div class="md-modal" id="modal-1">
  <div class="md-content">
    <h3>Редактирование сайта <?=$name?></h3>
    <div>
      <form method="post">
        <span>Имя сайта</span>
        <br><input type="text" name="name" value="yandex.ru">
        <br><span>Алиасы сайта</span>
        <br><input type="text" name="alias" value="yandex.com">
        <br><span>Кодировка сайта</span>
        <br><input type="text" name="charset" value="utf-8">
        <br><span>Email администратора сайта</span>
        <br><input type="text" name="email" value="support@yandex.ru">
        <br><span>Индексные файлы сайта</span>
        <br><input type="text" name="indexfiles" value="index.php">
        <br><input type="submit" name="save" value="Сохранить">
      </form>
      <a href="#">Close</a>
    </div>
  </div>
</div>
0
caesarnn
54 / 54 / 18
Регистрация: 22.05.2015
Сообщений: 608
22.11.2016, 21:09  [ТС] 6
Цитата Сообщение от abrdabr Посмотреть сообщение
в какой именно момент она должна разворачиватся
моментально при показе страницы (сам блок выводится при определённых условиях, которые заданы с помощью PHP.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2913 / 2471 / 1058
Регистрация: 15.12.2012
Сообщений: 9,172
Записей в блоге: 7
22.11.2016, 21:11 7
caesarnn, в jquery есть функция fadeIn() для плавного появления, как альтернативный вариант...
0
caesarnn
54 / 54 / 18
Регистрация: 22.05.2015
Сообщений: 608
22.11.2016, 22:24  [ТС] 8
Цитата Сообщение от mrtoxas Посмотреть сообщение
<a href="#modal-1">Open</a>
Не подходит, т.к. ссылка там другая (script.php?link=xxx)
0
22.11.2016, 22:24
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.11.2016, 22:24

Как заставить точку двигаться плавно и быстрее?
Наверно это очень нелепый и глупый вопрос, но всё-же рискну задать. В QBasic можно сделать так,...

Как на панели заставить кнопку появляться и исчезать при наведении - и отводе курсора
Опишу такой фрагмент код: 1. На форму бросил панель (panel1) 2. Заполняю эту панель...

Возможно ли заставить ползунок у дбгрида бегать плавно?
у дбгрида ползунок работает не корректно - он показывает будто в конце списка есть еще данные хотя...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru