0

При открытии сайта, на экране в «товарах» уже отображается модальное окно. А мне нужно, при нажатии на кнопку оно только появлялось, как исправить? код:

<style type="text/css">
#overlay {
    position: absolute;
   top: 50;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
   z-index: 1999999999;
   overflow: auto;
   visibility:hidden;
   opacity: 0;
   transition: opacity 0.7s ease-in 0s;
}
.popup {
   top: 10%;
   left: 0;
   right: 0;      
   font-size: 14px;
   margin: auto;
   width: 100%;
   min-width: 700px;
   max-width: 300px;
   position: absolute;
   padding: 50px 50px;
   border: 1px solid #ffffff;
   background-color: #fefefe;
   z-index: 1000;
   border-radius: 10px;
   font: 14px/18px 'Tahoma', Arial, sans-serif;
   box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4);
}
.close {
   top: 10px;
   right: 10px;
   width: 32px;
   height: 32px;
   position: absolute;
   border: none;
   border-radius: 50%;
   background-color: rgba(0, 130, 230, 0.9);
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
   cursor: pointer;
   outline: none;
}
.close:before {
   color: rgba(0, 130, 230, 0.9);
   content: "X";
   font-family:  Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: normal;
   text-decoration: none;
   text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
   background-color: rgba(0, 130, 230, 0.9);
}
#overlay .popup p.zag{margin:20px 0 10px;padding:0 0 6px;color:black; font-size:16px;font-weight:bold;border-bottom:1px solid black;}
</style>
1

1 ответ 1

2

Вы для popup изначально добавьте свойство в стилях display: none, далее по нажатию display: block

5
  • все ок, теперь при открытии страницы поп ап не отображается .popup { display: none; top: 10%; left: 0; right: 0; font-size: 14px; margin: auto; width: 100%; min-width: 700px; max-width: 300px; position: absolute; padding: 50px 50px; border: 1px solid #ffffff; background-color: #fefefe; z-index: 1000; border-radius: 10px; font: 14px/18px 'Tahoma', Arial, sans-serif; box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4);
    – MAB
    8 фев 2022 в 7:54
  • далее по нажатию display: block подскажите, пожалуйста, куда это вписывать?
    – MAB
    8 фев 2022 в 7:55
  • Вам нужно создать событие в javascript файле, по клику на эту кнопку, вам знаком js?
    – DeniDove
    8 фев 2022 в 7:57
  • если честно нет))) блин, может какой то код примерный у вас есть? попробую подбить под себя
    – MAB
    8 фев 2022 в 7:58
  • Вот тут подробно: medium.com/@dan.postnov/…
    – DeniDove
    8 фев 2022 в 8:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.