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
    Commented 8 февр. 2022 в 7:54
  • далее по нажатию display: block подскажите, пожалуйста, куда это вписывать?
    – MAB
    Commented 8 февр. 2022 в 7:55
  • Вам нужно создать событие в javascript файле, по клику на эту кнопку, вам знаком js?
    – DeniDove
    Commented 8 февр. 2022 в 7:57
  • если честно нет))) блин, может какой то код примерный у вас есть? попробую подбить под себя
    – MAB
    Commented 8 февр. 2022 в 7:58
  • Вот тут подробно: medium.com/@dan.postnov/…
    – DeniDove
    Commented 8 февр. 2022 в 8:11

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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