Menu icon Foundation
unable to click button in modal popup

I have a foundation modal popup and i am unable to click the buttons inside the modal popup. I'm using the opened event to trigger the event when the buttons are clicked but it is not working. Are there any other events to trigger this  . Below is the JS and HTML code

  function test() {
   $('#firstModal').foundation('reveal', 'open');

  $(document).on('opened.fndtn.reveal', '#firstModal', function () {
            //Handle Ok click
            $('#Navigate').click(function () {
              
                $('#firstModal').foundation('reveal', 'close');
            })
            //Handle Cancel click
            $('#Cancel').click(function (event) {
                //Your logic here
                $('#firstModal').foundation('reveal', 'open');
            })
        })
}
 <div class="modalDialog" id="firstModal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
        <div>
            <a href="#close" title="Close" class="close" aria-label="Close">X</a>
            <p>The SBD Key you provided belongs to a different region than the one where you are currently located. If you select Redirect, you will be redirected to the product registration site where you are located.</p>

            <p>
                Select Cancel to remain in the current product registration site.
            </p>
            <div class="align-right">
                <a href="#" class="button secondary" id="Cancel">cancel</a>
                <a href="http://google.com" class="button alert" id="Navigate">Navigate</a>
            </div>
        </div>
    </div>

modalpopupjqueryhtml

I have a foundation modal popup and i am unable to click the buttons inside the modal popup. I'm using the opened event to trigger the event when the buttons are clicked but it is not working. Are there any other events to trigger this  . Below is the JS and HTML code

  function test() {
   $('#firstModal').foundation('reveal', 'open');

  $(document).on('opened.fndtn.reveal', '#firstModal', function () {
            //Handle Ok click
            $('#Navigate').click(function () {
              
                $('#firstModal').foundation('reveal', 'close');
            })
            //Handle Cancel click
            $('#Cancel').click(function (event) {
                //Your logic here
                $('#firstModal').foundation('reveal', 'open');
            })
        })
}
 <div class="modalDialog" id="firstModal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
        <div>
            <a href="#close" title="Close" class="close" aria-label="Close">X</a>
            <p>The SBD Key you provided belongs to a different region than the one where you are currently located. If you select Redirect, you will be redirected to the product registration site where you are located.</p>

            <p>
                Select Cancel to remain in the current product registration site.
            </p>
            <div class="align-right">
                <a href="#" class="button secondary" id="Cancel">cancel</a>
                <a href="http://google.com" class="button alert" id="Navigate">Navigate</a>
            </div>
        </div>
    </div>