支持同一页面中的多个弹出窗口

Question

我正在试图弄清楚如何在同一页面内支持多个弹出窗口。我在这里看了所有的答案，但没有一个是我正在寻找的。

我的HTML / JavaScript如下所示：

 $(document).ready(function(){
    $('.click,.fade').click(function() {
      $('.pop').fadeToggle();
    });
});

.click { cursor:help }

    .pop {
    width:100%;
    height:100%;
    top:0;left:0;
    position:fixed;
    z-index:999;
    background:rgba(255,255,255,.9);
    display:none;
    }
    .fade {
    top:0;
    left:0;
    position:fixed;
    z-index:1000;
    width:100%;
    height:100%;
    }

    .popup {
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    position:fixed;
    background:#fff; /* background of popup box */
    padding:10px; /* padding of popup box */
    z-index:10000;
    max-width:300px; /* width of popup */
    border:1px solid #eee; /* popup border */
    }

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

<a class="click" rel="box1">popup 1</a>
<br><br>
<a class="click" rel="box2">popup 2</a>

<div id="box1" class="pop"> <div class="fade"></div>
    <div class="popup">
        yes
    </div>
</div>

<div id="box2" class="pop"> <div class="fade"></div>
    <div class="popup">
        no
    </div>
</div>