Модальное Окно - Помощь студентам

Tarasik · 17.03.2023, 12:51

Здравствуйте, подскажите пожалуйста как сделать плавное появления модального окна, и также исчезание,
Вот код моего модального окна, при открытии он появляется очень резко.

Код:

<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>

Valick · 17.03.2023, 13:48

https://fancyapps.com/fancybox/

Вадим Фролов · 18.03.2023, 11:38

Цитата:

Сообщение от 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;
}

Tolkant · 20.03.2023, 10:35

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

17.03.2023, 13:48	#2
Valick Форумчанин Регистрация: 27.04.2022 Сообщений: 423	https://fancyapps.com/fancybox/ стимулятор https://yoomoney.ru/to/41001303250491

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Модальное окно	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

20.03.2023, 10:35	#4
Tolkant Новичок Джуниор Регистрация: 30.01.2023 Сообщений: 2	Кстати, недавно с модальными окнами вляпались, которые небыли закрыты от индексации и которых не было видно при обычном анализе страницы. Будьте внимательны.