#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 разных браузерах. ** Вы очистили свой кэш? Возможно, вы загружаете старую таблицу стилей или старый файл сценария в кеш.