一度に開くことができるポップアップを1つだけにするにはどうすればいいですか？

例として次のコードを使用すると、両方のポップアップを同時に開くことができます。私の実際の生活のアプリケーションでは、私は30以上のポップアップを持っています。 新しいスクリプトが開かれたときに開いていたポップアップを閉じるスクリプトにコードを追加したいと思っています。また、自分自身をクリックするとポップアップを閉じることができます（今のように）。これは "if"文で行うことができますか？特定の例を共有してください。自分のJavaScriptコードを作成するのがうまくいかず、既存のコードをコピー/変更することしかできません。 - 進んでいただきありがとうございます！一度に開くことができるポップアップを1つだけにするにはどうすればいいですか？

<!DOCTYPE html> 
<html> 
<style> 
/* Popup container - can be anything you want */ 
.popup { 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
} 

/* The actual popup */ 
.popup .popuptext { 
    visibility: hidden; 
    width: 160px; 
    background-color: #555; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 8px 0; 
    position: absolute; 
    z-index: 1; 
    bottom: 125%; 
    left: 50%; 
    margin-left: -80px; 
} 



/* Toggle this class - hide and show the popup */ 
.popup .show { 
    visibility: visible; 
} 



</style> 
<body style="text-align:center"> 

<h2>Popup</h2> 

<div class="popup" onclick="myFunction1()">Click me to toggle the popup! 
    <span class="popuptext" id="myPopup1">A Simple Popup!</span> 
</div> 
<br> 
<br> 
<br> 
<div class="popup" onclick="myFunction2()">Click! 
    <span class="popuptext" id="myPopup2">A Popup!</span> 
</div> 

<script> 
// When the user clicks on div, open the popup 
function myFunction1() { 
    var popup = document.getElementById('myPopup1'); 
    popup.classList.toggle('show'); 
} 

function myFunction2() { 
    var popup = document.getElementById('myPopup2'); 
    popup.classList.toggle('show'); 
} 


</script> 

</body> 
</html>

出典

2016-09-10 nc1qs

あなたはちょうどあなたが新しいものを開く前に、すべてのpopuptext要素からshowクラスを削除する方法が必要になります。

はここで私が使用している例です。また、1つの関数を使用して、それがトリガーするのポップアップのためにそれに引数を渡すことによって、あなたのポップアップ要素のそれぞれについて、単一の機能を有する必要性をなくすことができます。

// When the user clicks on div, open the popup 
 
function popup($target) { 
 
    var popup = document.getElementById($target); 
 
    closePopups($target); 
 
    popup.classList.toggle('show'); 
 
} 
 

 

 
function closePopups($target) { 
 
    var popups = document.getElementsByClassName('popuptext'); 
 
    for (i = 0; i < popups.length; i++) { 
 
     if (popups[i].getAttribute('id') != $target) { 
 
     popups[i].classList.remove('show'); 
 
     } 
 
    } 
 
}

/* Popup container - can be anything you want */ 
 
.popup { 
 
    position: relative; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
/* The actual popup */ 
 
.popup .popuptext { 
 
    visibility: hidden; 
 
    width: 160px; 
 
    background-color: #555; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 8px 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    bottom: 125%; 
 
    left: 50%; 
 
    margin-left: -80px; 
 
} 
 

 

 

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

<h2>Popup</h2> 
 

 
<div class="popup" onclick="popup('myPopup1')">Click me to toggle the popup! 
 
    <span class="popuptext" id="myPopup1">A Simple Popup!</span> 
 
</div> 
 
<br> 
 
<br> 
 
<br> 
 
<div class="popup" onclick="popup('myPopup2')">Click! 
 
    <span class="popuptext" id="myPopup2">A Popup!</span> 
 
</div>

出典

2016-09-10 16:31:52

ありがとうございました - これは大きな前進です！しかし、自分自身をクリックしてもポップアップを閉じることができます。他のアイデア？ – nc1qs

おっと、その部分を逃した。それを修正するために編集されました。乾杯！ –

あなたは素晴らしいです！本当にありがとう、私の最初のすべての質問はここにあり、私は言わなければならない - 私は圧倒的に感銘を受けている！ – nc1qs

一度に開くことができるポップアップを1つだけにするにはどうすればいいですか？

答えて

関連する問題