Задать вопрос
@tarasik01
веб-разработка

Как сделать плавное появления Модального Окна?

Здравствуйте, подскажите пожалуйста как сделать плавное появления модального окна, и также исчезание,
Вот код моего модального окна, при открытии он появляется очень резко.
<style>
      #zatemnenie {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
      }
        #okno {
        width: 450px;
        height: 320px;
        text-align: center;
        padding: 15px;
        border: 3px;
        border-radius: 5px;
        color: #000000;
        position: absolute;        
	top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background: #fff;
      }
        #zatemnenie:target {display: block;}
        .close {
        display: inline-block;
        border: 1px solid #000000;
        color: #000000;
        padding: 0 12px;
        margin: 10px;
        text-decoration: none;
        background: #f2f2f2;
        font-size: 14pt;
        cursor:pointer;
      }
      .close:hover {background: #e6e6ff;}
    </style>
  </head>
 
  <body>
   
    <div id="zatemnenie">
      <div id="okno"> 
<nav><img src="fc_files/galochka.png" width="150" height "150"></nav> <br> <br>
        <h4>Ваши данные были отправлены оператору, после проверки вы получите уведомление<br> <br>
        <a href="#"><button class="form-btn" id="step1-btn">ОК!</button></a>
      </div>
    </div>
     
    <a href="#zatemnenie"><button class="form-btn" id="step1-btn">Модальное Окно</button></a>
 
  </div>
  • Вопрос задан
  • 1083 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик
Можно через JQUERY. А именно по клику на кнопку открытия модального окна прописывать
$("#zatemnenie").fadeIn(400)
А на закрытие
$("#zatemnenie").fadeOut(400)
(Заранее пропишите для затемнения display:none, ведь он родитель окна)
И не забудьте подключить сам JQUERY в <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
Ответ написан
5 комментариев
5 комментариев
imko
@imko
Senior Scratch Developer
Просто меняй ему прозрачность - opacity. За плавное изменение отвечать будет правило transition
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Frontend разработчик
Idea Platform • Москва
от 60 000 до 160 000 ₽
FullStack GameDev Developer (remote)
Wind4Tune
от 60 000 ₽
Project Manager в IT
Wanted. • Ростов-на-Дону
До 160 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Расшифровать требуемые параметры из CAN-шины авто Chery Tiggo 7 Pro
23 дек. 2024, в 00:27
20000 руб./за проект
Отправка команды на (раз)блокировку двигателя Chery Tiggo 7 Pro
23 дек. 2024, в 00:15
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Ещё заказы