javascript/Jqueryポップアップ - 一度に1ポップだけ開く

Question

私は3つのポップアップのために3つの別々のスクリプトを持っています。また、一度に1つのポップアップを開くことができたいので、.popup-newがアクティブで、クリックすると.popup-new-bを開くと、.popup-newが自動的に閉じます。どんな助けでも大歓迎です。

<script> 
$(document).ready(function() { 
$(".popup-trigger").click(function() { 
$(".popup-new").fadeIn(300); 

}); 

$(".popup-new > span, .popup-new").click(function() { 
$(".popup-new").fadeOut(300); 
}); 
}); 
</script> 

<script> 
$(document).ready(function() { 
$(".popup-trigger-b").click(function() { 
$(".popup-new-b").fadeIn(300); 

}); 

$(".popup-new-b > span, .popup-new-b").click(function() { 
$(".popup-new-b").fadeOut(300); 
}); 
}); 
</script> 

<script> 
$(document).ready(function() { 
$(".popup-trigger-c").click(function() { 
$(".popup-new-c").fadeIn(300); 

}); 

$(".popup-new-c > span, .popup-new-c").click(function() { 
$(".popup-new-c").fadeOut(300); 
}); 
}); 
</script> 

Answer 1

私はあなたのHTMLを見ることができないので。私はCSSでいくつかを追加しました。私はこれがあなたが探しているものであることを願っています。勿論、私は明確に尋ねていたかもしれないが、私は追加するのに十分な評判を持っていないコメント:(

$('button').click(function(){ 
 
    $('.popup').removeClass('popped'); 
 
    $('#popup-new'+$(this).attr('class')).addClass('popped'); 
 
});

.popup{ 
 
    position:fixed; 
 
    width:70%; 
 
    height:70%; 
 
    top:50%; 
 
    left:50%; 
 
    margin-top:-5%; 
 
    margin-left:-35%; 
 
    background-color:#ccc; 
 
    z-index:100; 
 
    display:none; 
 
} 
 
.popped{ 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="popup-new" class="popup">HI I am POPUP NEW</div> 
 
<div id="popup-new-b" class="popup">HI I am POPUP-NEW-B</div> 
 
<div id="popup-new-c" class="popup">HI I am POPUP-NEW-C</div> 
 

 
<button class="">Pop up New</button> 
 
<button class="-b">Pop up New B</button> 
 
<button class="-c">Pop up New C</button>

上記で火に私がポップアップ表示することができませんが、あなたの答えを共有するための

Answer 2

あなたはこのような何か行うことができます：

popups = ['.popup-new','.popup-new-b','.popup-new,-c'] 

// Pass an additional parameter to popup_click, which is the index of the popup in the array 
$('.popup-trigger').click({popup: 0}, popup_click); 
$('.popup-trigger-b').click({popup: 1}, popup_click); 
$('.popup-trigger-c').click({popup: 2}, popup_click); 

function popup_click(event) { 
    // Here write the code to open the popup 
    // You can access the popup through $(popups[event.data.popup]) 
    for (var i in popups) { 
     if (i != event.data.popup) { // event.data.popup contains the index that we passed 
      // Here write the code to close each of the other popups 
      // Access them through $(popups [i]) 
     } 
    } 
} 

$('html').click(function() { 
    for (var i in popups) { 
     $(popups[i]).hide(); 
    } 
}); 

$('.popup-btn-close').click(function(e) { 
    for (var i in popups) { 
     $(popups[i]).hide(); 
    } 
}); 

$('.popup-new').click(stop_propagation); 
$('.popup-new-b').click(stop_propagation); 
$('.popup-new-c').click(stop_propagation); 

function stop_propagation(e) { 
    e.stopPropagation(); 
} 

あなたが考慮したい反復コードを持っていたときに配列またはオブジェクトを使用することが一般的に良いアイデアです。

このように、イベントハンドラにパラメータを渡すことはjQueryでのみ機能することに注意してください。生のJavaScriptではクロージャを使用する必要があります。

他の配列とループ（下記参照）を使用することで、3行のブロックを単純化することもできます。

for (var i in popups) { 
    $(popups[i]).hide(); 
} 

とにそれらを回す：

あなたを残し

$('.yourClassNameHere').hide(); // Will select all the elements of the right class 

も404UserNotFound @としてあなたのポップアップのすべてが共通のクラスを共有する場合、あなたはこれらの行を簡素化することができ、書いたことに注意してくださいこのコンパクトコード：

popups = ['.popup-new', '.popup-new-b', '.popup-new,-c'] 
popup_triggers = ['.popup-trigger', '.popup-trigger-b', '.popup-trigger-c'] 

// Pass an additional parameter to popup_click, which is the index of the popup in the array 
for (i in popup_triggers) { 
    $(popup_triggers[i]).click({popup: i}, popup_click); 
} 

function popup_click(event) { 
    // Here write the code to open the popup 
    // You can access the popup through $(popups[event.data.popup]) 
    for (var i in suffixes) { 
     if (i != event.data.popup) { // event.data.popup contains the index that we passed 
      // Here write the code to close each of the other popups 
      // Access them through $(popups [i]) 
     } 
    } 
} 

$('html').click(function() { 
    $('.yourClassNameHere').hide(); 
}); 

$('.popup-btn-close').click(function(e) { 
    $('.yourClassNameHere').hide(); 
}); 

for (i in popups) { 
    $(popups[i]).click(stop_propagation); 
} 

function stop_propagation(e) { 
    e.stopPropagation(); 
} 

最後に、すべてのポップアップとトリガーが常に同じように名付けられ、接尾辞で、あなたは（いくつかのスペースを節約するためにいくつかのより多くのトリックで）さらにそれを凝縮できます

suffixes = ['', '-b', '-c'] 
 

 
for (let i in suffixes) { 
 
    $('.popup-trigger' + suffixes[i]).click(function(i) { 
 
    return function(e) { 
 
     hideAllPopups(); 
 
     $('.popup-new' + suffixes[i]).toggle(); 
 
     //e.stopPropagation(); // HERE 
 
    } 
 
    }(i)); 
 
} 
 

 
$('.popup-btn-close').click(hideAllPopups); 
 
//$('html').click(hideAllPopups); // HERE 
 

 
function hideAllPopups() { 
 
    $('.popup').hide(); 
 
} 
 

 
// Uncomment the two lines marked "HERE" to make the popups disappear whenever you click somewhere in the page (except on the buttons)

.popup { 
 
    margin: 20px auto; 
 
    padding: 20px; 
 
    background: #ccc; 
 
    width: 30%; 
 
    position: relative; 
 
} 
 

 
.popup-btn-close { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 30px; 
 
    font-weight: bold; 
 
} 
 

 
.box { 
 
    background: rgba(0,0,0,0.2); 
 
    padding: 5px; 
 
    background-clip: padding-box; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="box popup-trigger">Trigger popup #1</span> 
 
<span class="box popup-trigger-b">Trigger popup #2</span> 
 
<span class="box popup-trigger-c">Trigger popup #3</span> 
 

 
<hr/> 
 

 
<div class="popup-new popup" style="display:none">Popup #1 <span class="popup-btn-close">X</span></div> 
 
<div class="popup-new-b popup" style="display:none">Popup #2 <span class="popup-btn-close">X</span></div> 
 
<div class="popup-new-c popup" style="display:none">Popup #3 <span class="popup-btn-close">X</span></div>