问试图创建一个J查询弹出重定向到另一个Pop-Up

EN

$('.modal a').on('click', function (evt) {
    evt.preventDefault();
});

$('.open-modal').on('click', function (evt) {
    evt.preventDefault();
    $('#overlay').show();
});
$('.modal-close').on('click', function () {
    $('#overlay').hide();
    $('#modal1').show();
    $('#modal2').hide();
});

$('#modal2').hide();
$('#pg1btn1').on('click', function () {
    $('#modal2').show();
    $('#modal1').hide();
});
$('#pg2btn1').on('click', function () {
    $('#modal1').show();
    $('#modal2').hide();
});
$('#pg2btn2').on('click', function () {
    $('#overlay').hide();
    $('#modal1').show();
    $('#modal2').hide();
});

#overlay {
    display:block;
    width:100%;
    height:100%;
    z-index:100;
    position:fixed;
    top:0;
    left:0;
    background-color:rgba(0, 0, 0, 0.5);
    font-family:verdana, sans-serif;
}
.modal {
    display:block;
    width:400px;
    height:250px;
    position:fixed;
    top:calc(50% - 100px);
    left:calc(50% - 200px);
    background-color:#EEE;
    border:2px #AAA solid;
    border-radius:5px;
    box-shadow:0 1px 3px rgba(0, 0, 0, 0.4);
    font-size:24px;
    padding:5px;
}
.modal-head {
    display:block;
    height:30px;
    padding:5px;
    font-weight:bold;
    text-align:right;
}
.modal-head a {
    text-decoration:none;
    display:inline-block;
    width:15px;
    height:15px;
    margin-right:5px
}
.modal-action {
    display:block;
    background-color:#DDD;
    width:60px;
    position:absolute;
    left:calc(50% - 30px);
    margin-top:10px;
    bottom:10px;
    padding:5px 10px;
    border:2px #CCC solid;
    border-radius:5px;
    text-align:center;
    cursor:pointer;
    text-decoration:none;
}
.modal-action:hover {
    background-color:#BBB;
    border-color:#999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Crema crema chicory viennese sugar medium, rich mazagran americano aftertaste cinnamon rich. Filter, frappuccino that decaffeinated siphon caffeine so sit dripper. French press shop carajillo cappuccino mocha medium white lungo.</div>
<div><a href="" class="open-modal">Activate Modal</a>
</div>
<div id="overlay">
    <div id="modal1" class="modal">
        <div class="modal-head"><a href="" class="modal-close">x</a>

        </div>
        <div class="modal-body"><strong>Page ONE: </strong>Ristretto spoon galão bar, lungo siphon whipped variety seasonal half and half. Dripper plunger pot saucer crema extraction filter arabica. <a href="" id="pg1btn1" class="modal-action">Next</a>

        </div>
    </div>
    <div id="modal2" class="modal">
        <div class="modal-head"><a href="" class="modal-close">x</a>

        </div>
        <div class="modal-body"><strong>Page TWO: </strong>Roast, steamed, robust, chicory qui kopi-luwak, cappuccino, roast half and half cappuccino aromatic variety. Rich a mazagran qui cup barista chicory. <a href="" id="pg2btn1" class="modal-action" style="left:100px">Prev</a><a href="" id="pg2btn2" class="modal-action" style="left:250px;border-color:red;color:red;">Close</a> 
        </div>
    </div>
</div>

$(document).foundation();

<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.foundation5.zurb.com/foundation.js" type="text/javascript"></script>

<a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>

<!-- Reveal Modals begin -->
<div id="firstModal" class="reveal-modal" data-reveal>
  <h2>This is a modal.</h2>
  <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
  <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
  <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
  <a class="close-reveal-modal">&#215;</a>
</div>

<div id="secondModal" class="reveal-modal" data-reveal>
  <h2>This is a second modal.</h2>
  <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
  <a class="close-reveal-modal">&#215;</a>
</div>