onclick всплывающие разделы, но одновременно работает только 1

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть 4 всплывающих окна onclick div, которые работают нормально, но у меня есть 2 проблемы с ними

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

Я новый программист и очень мало знаю о javascript. Я был бы чрезвычайно признателен, если бы кто-нибудь мог мне с этим помочь. По сути, это последнее, что мне нужно выяснить для моего веб-сайта.

Спасибо вам за и и за всю помощь, которую вы можете оказать мне с моими 2 проблемами. Хорошего дня.

 document.getElementById("myPopup").addEventListener('click', function (event) { 
            event.stopPropagation(); 
        }); 
        function myFunction(event) {
  var popup = document.getElementById("myPopup");
  // popup.classList.toggle("show");
  if (popup.style.display === "none") {
    popup.style.display = "block";
  } else {
    popup.style.display = "none";
  }
  event.stopPropagation();
}

function onBodyClick(event) {
  var myTarget = event.target;
  while (myTarget) {
    if (myTarget.id === "myPopup") {
      console.log("You clicked Inside popup");
      return;
    } else {
      myTarget = myTarget.parentNode;
    }
  }
  console.log("You clicked Outside popup");
  var popup = document.getElementById("myPopup");
  if (popup.style.display === "block") {
    myFunction(event);
  }
}
////////////////////////////////////////////////////////////////////////////////////////////// Bell     
document.getElementById("mypopup").addEventListener('click', function (event) { 
            event.stopPropagation(); 
        }); 
        function myFunctions(event) {
  var popup = document.getElementById("mypopup");
  // popup.classList.toggle("show");
  if (popup.style.display === "none") {
    popup.style.display = "block";
  } else {
    popup.style.display = "none";
  }
  event.stopPropagation();
}

function onBodyClick(event) {
  var myTarget = event.target;
  while (myTarget) {
    if (myTarget.id === "mypopup") {
      console.log("You clicked Inside popup");
      return;
    } else {
      myTarget = myTarget.parentNode;
    }
  }
  console.log("You clicked Outside popup");
  var popup = document.getElementById("mypopup");
  if (popup.style.display === "block") {
    myFunctions(event);
  }
}
////////////////////////////////////////////////////////////////////////////////////////////// Heart
document.getElementById("mYpopup").addEventListener('click', function (event) { 
            event.stopPropagation(); 
        }); 
        function myFunctionss(event) {
  var popup = document.getElementById("mYpopup");
  // popup.classList.toggle("show");
  if (popup.style.display === "none") {
    popup.style.display = "block";
  } else {
    popup.style.display = "none";
  }
  event.stopPropagation();
}

function onBodyClick(event) {
  var myTarget = event.target;
  while (myTarget) {
    if (myTarget.id === "mYpopup") {
      console.log("You clicked Inside popup");
      return;
    } else {
      myTarget = myTarget.parentNode;
    }
  }
  console.log("You clicked Outside popup");
  var popup = document.getElementById("mYpopup");
  if (popup.style.display === "block") {
    myFunctionss(event);
  }
}   
////////////////////////////////////////////////////////////////////////////////////////////// Menu 
document.getElementById("mYpopuP").addEventListener('click', function (event) { 
            event.stopPropagation(); 
        });     
function myFunctionsss(event) {
  var popup = document.getElementById("mYpopuP");
  // popup.classList.toggle("show");
  if (popup.style.display === "none") {
    popup.style.display = "block";
  } else {
    popup.style.display = "none";
  }
  event.stopPropagation();
}

function onBodyClick(event) {
  var myTarget = event.target;
  while (myTarget) {
    if (myTarget.id === "mYpopuP") {
      console.log("You clicked Inside popup");
      return;
    } else {
      myTarget = myTarget.parentNode;
    }
  }
  console.log("You clicked Outside popup");
  var popup = document.getElementById("mYpopuP");
  if (popup.style.display === "block") {
    myFunctionsss(event);
  }
}

 /******************************************************************************************************************************************************Header*/
.s-header {
background-color: transparent; 
bottom: 0;
height: 65px;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}

.s-header-inner {
background-color: transparent; 
border: 1px solid transparent;
height: 63px;
margin: auto;
width: 95%;
}

.s-header-links-left {
float: left;
margin-top: 12px;
}   

/********************************************************************************************************************************************************Logo*/
.s-logo { 
height: 65px;
position: absolute; 
width: 150px;    
}

.s-logo img {
position: absolute;     
width: 185px;
}

/***********************************************************************************************************************************************Amount Raised*/
.s-header-links-right {
border: 1px solid transparent;
float: right;
margin-top: 20px;
}

.tooltip { 
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}

.amount {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}

.amount:hover {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}

#myPopup { 
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -190px;
margin-top: 8px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
width: 205px;
z-index: 1;
}

/********************************************************************************************************************************************************Bell*/
.bell {
cursor: pointer;
margin-left: 25px;
margin-right: 25px;
}

.fa-bell {
color: red;
font-size: 20px!important;
}

.fa-bell:hover {
color: red;
font-size: 20px!important;
}

.tooltips { 
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}

#mypopup {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -271px;
margin-top: 7px;
opacity: 1;
padding: 10px ;
position: absolute;
width: 345px;
z-index: 1;
}

#mypopup a {
color: #ffffff; 
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;   
text-decoration: underline;
}

#mypopup a:hover {
color: #ffffff; 
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;   
text-decoration: underline;
}

strong {
color: #ffffff; 
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 600;   
}

/*******************************************************************************************************************************************************Heart*/
.heart {
cursor: pointer;
}

.fa-heart {
color: red!important;
font-size: 20px!important;
}

.fa-heart:hover {
color: red!important;
font-size: 20px!important;
}

.toolstip { 
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}

#mYpopup {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -298px;
margin-top: 7px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
width: 325px;
z-index: 1;
}

/********************************************************************************************************************************************************Menu*/
i.fa-ellipsis-v {
color: red;
font-size: 20px;
margin-left: 25px;
}

i.fa-ellipsis-v:hover {
color: red;
font-size: 20px;
margin-left: 25px;
}

.menu {
cursor: pointer;
}

.toolstips { 
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}

#mYpopuP {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -150px;
margin-top: 7px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
width: 150px;
z-index: 1;
}

.toolstips { 
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}

#mYpopuP a {
color: #ffffff; 
display: block;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
padding-bottom: 10px;
text-decoration: none;
}

#mYpopuP a:hover {
color: #ffffff; 
display: block;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
padding-bottom: 10px;
text-decoration: underline;
}

/******************************************************************************************************************************************************Middle*/
.middle {
background-color: transparent;
border: 1px solid transparent;
border-radius: 0px;
bottom: 0;
height: 275px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 525px;
}

 <body onclick="onBodyClick(event)"
<div class="s-header">
<div class="s-header-inner">
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Logo -->
<div class="s-header-links-left">
<div class="s-logo">
<a href="https://www.capebretoncares.com/Start/" target="_top">
<img src="https://www.capebretoncares.com/Start/images/cape-breton-cares-logo-1.png"></a>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------------------------------- Header Links Right -->
<div class="s-header-links-right">
<!------------------------------------------------------------------------------------------------------------------------------------------- Amount Raised -->
<span class="tooltip" onclick="myFunction(event)">
<div class="amount">$234.41</div>
<span id="myPopup" style="display: none;">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.
</span></span>
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Bell -->
<span class="tooltips" onclick="myFunctions(event)">
<div class="bell">
<i class='far fa-bell'></i>
</div>
<span id="mypopup" style="display: none;">
<strong>Cape Breton Cares' Brand New Look!</strong>
<br/>
<br/>
We urge you to please share Cape Breton Cares with your friends and family to help provide more meals and support for animal organizations in our local communities.
<p><a href="https://www.capebretoncares.com/p/spread-the-word/" target="_blank">Spread The Word</a></p>
Stay tuned for exciting updates coming soon.
</span>
</span>
<!--------------------------------------------------------------------------------------------------------------------------------------------------- Heart -->
<span class="toolstip" onclick="myFunctionss(event)">
<div class="heart">
<i class="far fa-heart"></i>
</div>
<span id="mYpopup" style="display: none;">
Every New Tab you open helps provide meals and support for animal organizations in our local communities. On average we need around 100 New Tabs to provide $1 of support to help our local animal organizations!
</span>
</span>
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Menu -->
<span class="toolstips" onclick="myFunctionsss(event)">
<div class="menu">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</div>
<span id="mYpopuP" style="display: none;">
<a href="https://www.capebretoncares.com/p/contact/" target="_blank">Contact Us</a>
<a href="https://www.capebretoncares.com/p/donations/" target="_blank">Our Donations</a>
<a href="https://www.capebretoncares.com/p/privacy-policy/" target="_blank">Privacy Policy</a>
<a href="https://www.capebretoncares.com/p/terms-of-use/" target="_blank">Terms of Use</a>
</span>
</span>
</div>
</div>
</div>
</body>

Ответ №1:

 function onBodyClick(event) {
  var myTarget = event.target;
  while (myTarget) {
    if (myTarget.id === "mYpopuP") {
      console.log("You clicked Inside popup");
      return;
    } else {
      myTarget = myTarget.parentNode;
    }
  }
  console.log("You clicked Outside popup");
  var popup = document.getElementById("mYpopuP");
  if (popup.style.display === "block") {
    myFunctionsss(event);
  }
  
  
  var myTarget = event.target;
  while (myTarget) {
    if (myTarget.id === "myPopup") {
      console.log("You clicked Inside popup");
      return;
    } else {
      myTarget = myTarget.parentNode;
    }
  }
  console.log("You clicked Outside popup");
  var popup = document.getElementById("myPopup");
  if (popup.style.display === "block") {
    myFunction(event);
  }
  
   var myTarget = event.target;
  while (myTarget) {
    if (myTarget.id === "mypopup") {
      console.log("You clicked Inside popup");
      return;
    } else {
      myTarget = myTarget.parentNode;
    }
  }
  console.log("You clicked Outside popup");
  var popup = document.getElementById("mypopup");
  if (popup.style.display === "block") {
    myFunctions(null);
  }
  
  var myTarget = event.target;
  while (myTarget) {
    if (myTarget.id === "mYpopup") {
      console.log("You clicked Inside popup");
      return;
    } else {
      myTarget = myTarget.parentNode;
    }
  }
  console.log("You clicked Outside popup");
   var popup = document.getElementById("mypopup");
  if (popup.style.display === "block") {
    myFunctionss(event);
  }
}


document.getElementById("myPopup").addEventListener("click", function (event) {
  event.stopPropagation();
});

function myFunction(event) {
  var popup = document.getElementById("myPopup");
  // popup.classList.toggle("show");
  if (popup.style.display === "none") {
    popup.style.display = "block";
  } else {
    popup.style.display = "none";
  }
  event.stopPropagation();
}


////////////////////////////////////////////////////////////////////////////////////////////// Bell
document.getElementById("mypopup").addEventListener("click", function (event) {
  event.stopPropagation();
});
function myFunctions(event) {
  var popup = document.getElementById("mypopup");
  // popup.classList.toggle("show");
  if (popup.style.display === "none") {
    popup.style.display = "block";
  } else {
    popup.style.display = "none";
  }
  event.stopPropagation();
}


////////////////////////////////////////////////////////////////////////////////////////////// Heart
document.getElementById("mYpopup").addEventListener("click", function (event) {
  event.stopPropagation();
});
function myFunctionss(event) {
  var popup = document.getElementById("mYpopup");
  // popup.classList.toggle("show");
  if (popup.style.display === "none") {
    popup.style.display = "block";
  } else {
    popup.style.display = "none";
  }
  event.stopPropagation();
}


////////////////////////////////////////////////////////////////////////////////////////////// Menu
document.getElementById("mYpopuP").addEventListener("click", function (event) {
  event.stopPropagation();
});
function myFunctionsss(event) {
  var popup = document.getElementById("mYpopuP");
  // popup.classList.toggle("show");
  console.log(popup.style.display);
  if (popup.style.display === "none") {
    popup.style.display = "block";
  } else {
    popup.style.display = "none";
  }
  event.stopPropagation();
}

 /******************************************************************************************************************************************************Header*/
.s-header {
background-color: transparent; 
bottom: 0;
height: 65px;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}

.s-header-inner {
background-color: transparent; 
border: 1px solid transparent;
height: 63px;
margin: auto;
width: 95%;
}

.s-header-links-left {
float: left;
margin-top: 12px;
}   

/********************************************************************************************************************************************************Logo*/
.s-logo { 
height: 65px;
position: absolute; 
width: 150px;    
}

.s-logo img {
position: absolute;     
width: 185px;
}

/***********************************************************************************************************************************************Amount Raised*/
.s-header-links-right {
border: 1px solid transparent;
float: right;
margin-top: 20px;
}

.tooltip { 
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}

.amount {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}

.amount:hover {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}

#myPopup { 
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -190px;
margin-top: 8px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
width: 205px;
z-index: 1;
}

/********************************************************************************************************************************************************Bell*/
.bell {
cursor: pointer;
margin-left: 25px;
margin-right: 25px;
}

.fa-bell {
color: red;
font-size: 20px!important;
}

.fa-bell:hover {
color: red;
font-size: 20px!important;
}

.tooltips { 
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}

#mypopup {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -271px;
margin-top: 7px;
opacity: 1;
padding: 10px ;
position: absolute;
width: 345px;
z-index: 1;
}

#mypopup a {
color: #ffffff; 
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;   
text-decoration: underline;
}

#mypopup a:hover {
color: #ffffff; 
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;   
text-decoration: underline;
}

strong {
color: #ffffff; 
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 600;   
}

/*******************************************************************************************************************************************************Heart*/
.heart {
cursor: pointer;
}

.fa-heart {
color: red!important;
font-size: 20px!important;
}

.fa-heart:hover {
color: red!important;
font-size: 20px!important;
}

.toolstip { 
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}

#mYpopup {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -298px;
margin-top: 7px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
width: 325px;
z-index: 1;
}

/********************************************************************************************************************************************************Menu*/
i.fa-ellipsis-v {
color: red;
font-size: 20px;
margin-left: 25px;
}

i.fa-ellipsis-v:hover {
color: red;
font-size: 20px;
margin-left: 25px;
}

.menu {
cursor: pointer;
}

.toolstips { 
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}

#mYpopuP {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -150px;
margin-top: 7px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
width: 150px;
z-index: 1;
}

.toolstips { 
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}

#mYpopuP a {
color: #ffffff; 
display: block;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
padding-bottom: 10px;
text-decoration: none;
}

#mYpopuP a:hover {
color: #ffffff; 
display: block;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
padding-bottom: 10px;
text-decoration: underline;
}

/******************************************************************************************************************************************************Middle*/
.middle {
background-color: transparent;
border: 1px solid transparent;
border-radius: 0px;
bottom: 0;
height: 275px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 525px;
}

 <body onclick="onBodyClick(event)"
<div class="s-header">
<div class="s-header-inner">
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Logo -->
<div class="s-header-links-left">
<div class="s-logo">
<a href="https://www.capebretoncares.com/Start/" target="_top">
<img src="https://www.capebretoncares.com/Start/images/cape-breton-cares-logo-1.png"></a>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------------------------------- Header Links Right -->
<div class="s-header-links-right">
<!------------------------------------------------------------------------------------------------------------------------------------------- Amount Raised -->
<span class="tooltip" onclick="myFunction(event)">
<div class="amount">$234.41</div>
<span id="myPopup" style="display: none;">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.
</span></span>
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Bell -->
<span class="tooltips" onclick="myFunctions(event)">
<div class="bell">
<i class='far fa-bell'></i>
</div>
<span id="mypopup" style="display: none;">
<strong>Cape Breton Cares' Brand New Look!</strong>
<br/>
<br/>
We urge you to please share Cape Breton Cares with your friends and family to help provide more meals and support for animal organizations in our local communities.
<p><a href="https://www.capebretoncares.com/p/spread-the-word/" target="_blank">Spread The Word</a></p>
Stay tuned for exciting updates coming soon.
</span>
</span>
<!--------------------------------------------------------------------------------------------------------------------------------------------------- Heart -->
<span class="toolstip" onclick="myFunctionss(event)">
<div class="heart">
<i class="far fa-heart"></i>
</div>
<span id="mYpopup" style="display: none;">
Every New Tab you open helps provide meals and support for animal organizations in our local communities. On average we need around 100 New Tabs to provide $1 of support to help our local animal organizations!
</span>
</span>
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Menu -->
<span class="toolstips" onclick="myFunctionsss(event)">
<div class="menu">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</div>
<span id="mYpopuP" style="display: none;">
<a href="https://www.capebretoncares.com/p/contact/" target="_blank">Contact Us</a>
<a href="https://www.capebretoncares.com/p/donations/" target="_blank">Our Donations</a>
<a href="https://www.capebretoncares.com/p/privacy-policy/" target="_blank">Privacy Policy</a>
<a href="https://www.capebretoncares.com/p/terms-of-use/" target="_blank">Terms of Use</a>
</span>
</span>
</div>
</div>
</div>
</body>

У вас есть несколько onBodyClick функций, вы пишете вторую, она заменяет первую, вот почему это происходит. Попробуйте объединить все onBodyClick функции.

Чтобы скрыть другое всплывающее окно, вы можете добавить его в свой myFunctionsss (внутри всех этих функций типа щелкните и измените идентификатор в соответствии с всплывающими окнами, которые вы хотите скрыть)

 var popup = document.getElementById("mYpopuP");
      if (popup.style.display === "none") {
        popup.style.display = "block";
        document.getElementById("mypopup").style.display="none"; //add something like this
        document.getElementById("myPopup").style.display="none";//add something like this
      } else {
        popup.style.display = "none";
      }

Рабочий код:https://codepen.io/DarkKelvin/pen/ExKwMev

1. Сердце теперь работает. Возможно ли закрыть другие всплывающие окна при открытии других. Спасибо

2. Вы можете установить стиль none для других всплывающих окон, когда вы устанавливаете блок для одного всплывающего окна

3. Как я могу это сделать. Спасибо

4. проверьте обновленную версию, я добавил код для одного всплывающего окна mYpopuP, когда вы его откроете, он закроет все остальные всплывающие окна

5. Есть ли способ закрыть каждый из них при открытии нового, а не закрывать все при нажатии на 1 определенный. Спасибо

Вопрос:

Ответ №1:

Комментарии:

Вам также может понравиться

Vue — динамически изменять значение входного текста по умолчанию

Google PHP API возвращает ошибку недопустимого аргумента

как мне обработать все вложенные папки за один проход с помощью python