Созданное всплывающее окно в js, но не открывается после закрытия

ProgramBox

Созданное всплывающее окно в js, но не открывается после закрытия

Post author:admin
Запись опубликована:28 марта, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Мне удается вызвать всплывающее окно и добавить кнопку закрытия, но когда оно закрыто, первая функция больше не запускает всплывающее окно! Понятия не имею, что я делаю не так! Всплывающее окно полностью работало без кнопки закрытия, но я хотел добавить его для UX, чтобы было ясно, что вы действительно можете показывать или скрывать всплывающее окно в любое время. Вот что я пробовал:

 <style>
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: underline;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
/*   background: rgba(255, 255, 255, 0.95); */
  background-color: white;
  color: #3e3e3f;
  padding: 8px 10px;
  position: absolute;
  z-index: 1;
  bottom: 10%;
  left: 30%;
  margin-left: -80px;
  border-radius: 2px;
  -webkit-box-shadow: 0px 6px 8px -2px rgba(221,221,221,.5);
  -moz-box-shadow: 0px 6px 8px -2px rgba(221,221,221,.5);
   box-shadow: 0px 6px 8px -2px rgba(221,221,221,.5);
   
}
  @media screen and (max-width: 767px){
  .popup .popuptext {
    left: 35%;
  background: rgba(255, 255, 255, 0.96);

  }
  }
  
.popuptext {margin: 15px;}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: relative;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-color: white;

}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
 
}
.lista-popup { 
  width: 550px;
  margin: 10px;
  left: -5px;
  
   }
.lista-info-plants {
  width: 550px;


}
  
@media screen and (max-width:767px){
.lista-info-plants{
  width: 340px;
  margin: 10px;
}
}
  
@media screen and (max-width:767px){
.lista-popup{
  width: 340px;    
  margin: 10px;
}
}

.cerrar-popup{
  visibility: hidden;
  background-color: #ff6b6b;
  color: white;
  width: auto;
  height: auto;
  font-weight: 700;
  border-radius: 1000px;
  border: none;
  text-decoration: none;
  z-index: 1500;
}
.boton-para-cerrar  {
  padding-left: 90%;
  top: 100px;
}

</style>
<div class="popup" onclick="myFunction()"><h2><strong>¿Cómo funciona?</strong></h2>
<div class="popuptext" id="myPopup">
<div class="lista-popup">

  <div class="boton-para-cerrar"><button class="cerrar-popup" onclick="myFunction2()" id="btn-cerrar"> X </button></div>
  <h3>Te explicamos como funciona :)</h3> 
  <ol>
    <li class="lista-info-plants">Selecciona la plantita que quieres, tenemos 3 opciones.</li><br>
    <li class="lista-info-plants">Para enviar las plantitas, utilizamos envío del día siguiente para que tu plantita no sufra.</li><br> 
    <li class="lista-info-plants">El envío del día siguiente cuenta a partir de que la maceta sale de nuestras instalaciones. En realidad necesitamos unos días para sembrar la pantita y empacarla bien.</li><br>
    <li class="lista-info-plants">Por el momento solo enviamos cactus y suculentas, pues son los que mejor aguantan los traslados.</li><br>
    <li class="lista-info-plants">Por último, te recordamos que tener una plantita es como una mascota, hay que cuidar de ella y darle lo que necesita para sobrevivir :) </li><br>
  </ol>
    </div>
  </div>
</div>

<script>
// When the user clicks on div, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
  var btncerrar = document.getElementById("btn-cerrar");
  btncerrar.classList.toggle("show");

}
  function myFunction2() {
  var cerrar = document.getElementById("myPopup");
  cerrar.classList.toggle("hide");
  // var btncerrar2 = document.getElementById("btn-cerrar");
  // btncerrar2.classList.toggle("hide");
}
</script>

1. Просто попробуйте добавить и удалить один класс. Например, просто добавьте класс show для отображения всплывающего окна и удалите его, когда пользователь нажимает кнопку закрытия.

2. Вам нужно будет поместить весь ваш код (html / css / js / в тот же фрагмент кода, чтобы он мог запускаться, иначе, т. Е. Нажатие на кнопку запускает myFunction(), которая не определена в этом фрагменте. Не могли бы вы рассмотреть возможность реорганизации вашего кода под одним (1) фрагментом, пожалуйста? Спасибо

3. @LaurentC конечно. У меня есть это в одном фрагменте, просто отделенном для публикации, думая, что его будет легче читать. Я думаю, это был не lol. Я просто отредактировал сообщение, чтобы показать один фрагмент кода.

4. Спасибо, я только что добавил быстрое исправление для вашего кода в поле ответа. Спасибо. И дайте мне знать, если это то, что вы хотели. Tambien hablo espanol 🙂

5. @LaurentC это очень странно, потому что это работает здесь, но не на моем полном сайте. Может быть, это проблема класса? No estoy seguro!!

Ответ №1:

Как обсуждалось с OP, я предоставляю упрощенное решение, и поскольку у них уже есть jQuery, загруженный на страницу их веб-сайта, мы можем использовать его без добавления какого-либо веса. Я также упростил CSS.

 function myFunction() {
  $("#myPopup, #btn-cerrar").toggle();
}

 /* Popup container - can be anything you want */

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: underline;
}


/* The actual popup */

.popup .popuptext {
  /*   background: rgba(255, 255, 255, 0.95); */
  display: none;
  background-color: white;
  color: #3e3e3f;
  padding: 8px 10px;
  position: absolute;
  z-index: 1;
  bottom: 10%;
  left: 30%;
  margin-left: -80px;
  border-radius: 2px;
  -webkit-box-shadow: 0px 6px 8px -2px rgba(221, 221, 221, .5);
  -moz-box-shadow: 0px 6px 8px -2px rgba(221, 221, 221, .5);
  box-shadow: 0px 6px 8px -2px rgba(221, 221, 221, .5);
}

@media screen and (max-width: 767px) {
  .popup .popuptext {
    left: 35%;
    background: rgba(255, 255, 255, 0.96);
  }
}

.popuptext {
  margin: 15px;
}


/* Popup arrow */

.popup .popuptext::after {
  content: "";
  position: relative;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-color: white;
}


/* Toggle this class - hide and show the popup 
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
*/


/* Add animation (fade in the popup) 
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
 
}

*/

.lista-popup {
  width: 550px;
  margin: 10px;
  left: -5px;
}

.lista-info-plants {
  width: 550px;
}

@media screen and (max-width:767px) {
  .lista-info-plants {
    width: 340px;
    margin: 10px;
  }
}

@media screen and (max-width:767px) {
  .lista-popup {
    width: 340px;
    margin: 10px;
  }
}


/*
.cerrar-popup{
  display:none;
  background-color: #ff6b6b;
  color: white;
  font-weight: 700;
  border-radius: 1000px;
  border: none;
  text-decoration: none;
  z-index: 1500;
}
*/


/* added CSS code by LaurentC */

#myPopup {
  position: relative;
  margin-top: -50px;
  margin-left: 250px;
}

.lista-popup {
  position: relative;
}

#btn-cerrar {
  cursor: pointer;
  display: none;
  background-color: #ff6b6b;
  color: white;
  font-weight: 700;
  border-radius: 1000px;
  border: none;
  text-decoration: none;
  z-index: 1500;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="popup" onclick="myFunction()">
  <h2><strong>¿Cómo funciona?</strong></h2>
  <div class="popuptext" id="myPopup">
    <div class="lista-popup">
      <button class="cerrar-popup" onclick="myFunction()" id="btn-cerrar"> X </button>
      <h3>Te explicamos como funciona :)</h3>
      <ol>
        <li class="lista-info-plants">Selecciona la plantita que quieres, tenemos 3 opciones.</li>
        <br>
        <li class="lista-info-plants">Para enviar las plantitas, utilizamos envío del día siguiente para que tu plantita no sufra.</li>
        <br>
        <li class="lista-info-plants">El envío del día siguiente cuenta a partir de que la maceta sale de nuestras instalaciones. En realidad necesitamos unos días para sembrar la pantita y empacarla bien.</li>
        <br>
        <li class="lista-info-plants">Por el momento solo enviamos cactus y suculentas, pues son los que mejor aguantan los traslados.</li>
        <br>
        <li class="lista-info-plants">Por último, te recordamos que tener una plantita es como una mascota, hay que cuidar de ella y darle lo que necesita para sobrevivir :) </li>
        <br>
      </ol>
    </div>
  </div>
</div>

Откройте Codepen, чтобы поиграть с моей новой версией:https://codepen.io/larrytherabbit/pen/YzqeOwe

1. Спасибо, Лоран, все еще не работает, этот фрагмент уже запущен, но не работает!

2. вы также обновили код CSS? Я изменил видимость: скрыто на отображение: нет для 3 элементов, поэтому оно не сработало бы, если бы тоже не было изменено.

3. Да! Я использовал те же стили, которые вы добавили в свой ответ!

4. Хорошо, ну, в верхней части моей головы я думаю, может быть, какое-то нежелательное взаимодействие с кодом из используемых вами библиотек… позвольте мне еще раз проверить новую версию live!

5. ОК. Это все тот же URL-адрес для live preivew? ( zkuzrjax2mmihlq6-7442563129.shopifypreview.com/collections /… ) // Потому что у меня это работает в 3 разных браузерах. ** Вы очистили свой кэш? Возможно, вы загружаете старую таблицу стилей или старый файл сценария в кеш.