モーダルが表示されない

（モーダルウィンドウを実装しようとしています。）

プライバシーポリシーのリンクをクリックしたらoverlayの背景が表示されるのですが、肝心のモーダルウィンドウが表示されません。
そしてそのoverlayを非表示にしようと、overlayである背景をクリックしても非表示されず、元に戻すためにはページを更新しないといけません。

気になった点に関しては、centeringModalSyncerがエディタ(vscode)で薄く表示されているところです。

コードは以下の通りです。⇓

html
1  <div>
2    <form>
3      <ul>
4       ・・・
5        <li class="checkbox-list">
6          <label><input class="checkbox" type="checkbox"><span><a id="modal-open" class="private">プライバシーポリシー</a>に合意する</span></label>
7        </li>
8        <li class="submit2">
9          <input type="submit" class="btn2 submit" value="送信する">
10          <img class="right2" src="img/right.png" width="16px" height="16">
11        </li>
12      </ul>
13    </form>
14  </div>
15
16
17  <!-- modal -->
18  <div id="modal-content">
19    <p class="modal-p">「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
20    <p class="modal-p"><a id="modal-close" class="button-link">閉じる</a></p>
21  </div>
22

scss
1// modal
2#modal-content {
3  display: none;
4  width: 50%;
5  margin: 1.5em auto 0;
6  padding: 10px 20px;
7  border: 2px solid #aaa;
8  background: #fff;
9  z-index: 12;
10  position: fixed;
11}
12
13.modal-p {
14  margin-top: 1em;
15  &:first-child {
16    margin-top: 0;
17  }
18}
19
20.private {
21  color: #0000ff;
22  text-decoration: underline;
23  &:hover {
24    cursor: pointer;
25    color: #f00;
26  }
27}
28
29#modal-overlay {
30  z-index: 11;
31  display: none;
32  position: fixed;
33  top: 0;
34  left: 0;
35  width: 100%;
36  height: 120%;
37  background-color: rgba(0, 0, 0, .75);
38}
39

jQuery
1//modal
2$('#modal-open').click(
3  function () {
4    $(this).blur();
5    if ($('#modal-overlay')[0]) return false;
6    $('#modal-overlay').fadeIn('slow');
7    $('#modal-content').fadeIn('slow');
8
9    function centeringModalSyncer() {
10      var w = $(window).width(),
11        h = $(window).height(),
12        cw = $('#modal-content').outerWidth({ margin: true }),
13        ch = $('#modal-content').outerHeight({ margin: true }),
14        pxleft = ((w - cw) / 2),
15        pxtop = ((h - ch) / 2);
16
17      $('#modal-content').css({ 'left': pxleft + 'px', 'top': pxtop + 'px'});
18    }
19  }
20);
21
22$('#modal-overlay, #modal-close').unbind().click(function() {
23  $('#modal-content, #modal-overlay').fadeOut('slow', function() {
24    $('modal-overlay').remove();
25  })
26});
27