Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > IT форум > Помощь студентам
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 17.03.2023, 12:51   #1
Tarasik
Пользователь
 
Регистрация: 03.03.2023
Сообщений: 12
По умолчанию Модальное Окно

Здравствуйте, подскажите пожалуйста как сделать плавное появления модального окна, и также исчезание,
Вот код моего модального окна, при открытии он появляется очень резко.
Код:
<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>
Tarasik вне форума Ответить с цитированием
Старый 17.03.2023, 13:48   #2
Valick
Форумчанин
 
Регистрация: 27.04.2022
Сообщений: 484
По умолчанию

https://fancyapps.com/fancybox/
Valick вне форума Ответить с цитированием
Старый 18.03.2023, 11:38   #3
Вадим Фролов
Пользователь
 
Аватар для Вадим Фролов
 
Регистрация: 02.05.2022
Сообщений: 81
По умолчанию

Цитата:
Сообщение от Tarasik Посмотреть сообщение
Здравствуйте, подскажите пожалуйста как сделать плавное появления модального окна, и также исчезание,
Вот код моего модального окна, при открытии он появляется очень резко.
Код:
<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>
.popup {
height: 100%;
position: fixed;
visibility: hidden;
opacity: 0;
transition: visibility 0.5s, opacity 0.5s linear;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
display: flex;
z-index: 1;
} и в окрытии попапа такие стили .popup_opened {
display: flex;
visibility: visible;
opacity: 1;
}
Вадим Фролов вне форума Ответить с цитированием
Старый 20.03.2023, 10:35   #4
Tolkant
Новичок
Джуниор
 
Регистрация: 30.01.2023
Сообщений: 2
По умолчанию

Кстати, недавно с модальными окнами вляпались, которые небыли закрыты от индексации и которых не было видно при обычном анализе страницы. Будьте внимательны.
Tolkant вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модальное окно lastochka21 JavaScript, Ajax 1 22.11.2018 10:13
В php модальное окно -=Virus=- PHP 1 23.01.2016 22:16
Модальное окно Sprat PHP 3 28.03.2012 16:04
Модальное окно из Dll neo1109 Общие вопросы Delphi 0 29.06.2007 11:24