javascript/Jquery 弹出窗口 - 一次仅打开一个弹出窗口

Question

我有 3 个独立的脚本用于 3 个弹出窗口，我确定有更好的方法将它们构建为一个脚本吗？我还希望一次只能打开一个弹出窗口，因此如果 .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>