z-indexの仕様について（モーダル画面）

下記のコードでモーダル画面作成を試みているのですが、モーダルのコンテンツ画面が前面に出てこず、オーバレイが全面にでてきてしまっています。
z-indexもコンテンツ要素のところを9999にしたりと、思考錯誤してみましたがうまくいきません。。。

コードはz-indexを使用している箇所のみ抜粋しています。
解説に必要ということであれば追加していきますので、その際はお申し付けください！

ご指導よろしくお願いします！！！

body,
    ul,
    li {
      margin: 0;
      padding: 0;
    }

    .wrapper {
      box-sizing: border-box;
      padding: 0 15px;
      margin-top: 56px;

    }

    img {
      max-width: 100%;
      height: 300px;
    }
 /*ヘッダー全体の色、サイズ変更*/
    header {
      background: #F0F8FF;
      color: #ccc;
      padding: 25px;
      top: 0;

    }

    footer {
      background: #ccc;
      padding: 1rem;
      position:center;
    }

       /*nabi開閉部分*/
    .nav-wrap{
        box-sizing: border-box;
        position: fixed;
        top: 0;
        width: 100%;
        height:34px;
        padding:0;

    }
    .gnav {
      list-style-type: none;
      background: #FFFAFA;
      width: 100%;
      z-index: 99;
      position:fixed;
    }

    .gnav li {
      border-bottom: 1px solid #333;
    }

    .gnav li a {
      display: block;
      text-decoration: none;
      /* (44-16)/2=14px */
      padding: .875rem 1rem;
    }

    /*header_title*/
#header_title{
        top:0;
        position:fixed;
        coolor:#FF00FF;
        left:50%;
        right:50%;

    }


    /*ハンバーガーボタン*/

    .icon-animation {
      width: 44px;
      height: 44px;
      display: block;
      cursor: pointer;
      float: right;
      position: absolute;
      right: .5rem;
      text-align: center;
      top: .3rem;
    }

    .icon-animation span {
      width: 39px;
      height: 5px;/*ヘッダーメニューアイコンの線の太さ変更*/
      border-radius:27%;
      display: block;
      background: #00ffff;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -25px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    .icon-animation .top {
      -webkit-transform: translateY(-13px);
      -ms-transform: translateY(-13px);
      transform: translateY(-13px);
    }

    .icon-animation .bottom {
      -webkit-transform: translateY(13px);
      -ms-transform: translateY(13px);
      transform: translateY(13px);
    }

    .is-open .middle {
      background: rgba(51, 51, 51, 0);
    }

    .is-open .top {
      -webkit-transform: rotate(-45deg) translateY(0px);
      -ms-transform: rotate(-45deg) translateY(0px);
      transform: rotate(-45deg) translateY(0px);
    }

    .is-open .bottom {
      -webkit-transform: rotate(45deg) translateY(0px);
      -ms-transform: rotate(45deg) translateY(0px);
      transform: rotate(45deg) translateY(0px);
    }

#top_content{
    img{
   width: 100%  ;
   max-height:319px;
}
}
Title{
    width:200px;
    height:100px;
    background: blue;
    text-align:center;
    line-height: 100px;
}



   /*以下、片手操作用*/
#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 240px;
  height: 240px;
  border-radius: 126px;
  border: 6px solid #0000CD;
  background: #F8F8FF;
  margin-left:auto;
  margin-right: 0px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
   -moz-transform: rotate(180deg);
  -moz-transition: -moz-transform 0.5s ease-out;
  -webkit-transform: rotate(180deg);
  -webkit-transition: -webkit-transform 0.5s ease-out;
  transform: rotate(180deg);
  transition: transform 0.5s ease-out;
}
 #menu ul li {
  width: 40px;
  height: 40px;
  border-radius: 22px;
  border: 2px solid #0000CD;
  background: #252925;
  overflow: hidden;
  margin-left:auto;
  margin-right:0px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  position:relative;
}

#menu ul li:nth-child(1) {
  top: -25px;
  right: 110px;
}

#menu ul li:nth-child(2) {
  top: -30px;
  right: 185px;
}

#menu ul li:nth-child(3) {/*SNSボタン部分*/
  top: 0px;
  right: 220px;
    color: #fff;
    background-color: #f00;
    transition: .3s ease;
}

#menu ul li#openMenu {
  top: 50px;
  right: 10px;
  cursor: pointer;
}
#menu ul li#closeMenu {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  top: -140px;
  margin-right: 0px;
  border: none;
  background-color: transparent;
  box-shadow: none;
  text-align: center;
  color: #252925;
}
#menu ul.active {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transition: -moz-transform 0.5s ease-out;
  -webkit-transition: -webkit-transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}
#menu {
  position: fixed;
  margin: 0;
  padding: 0;
  right: -180px;
  bottom: -180px;
   -moz-transition: right 0.5s ease-out, bottom 0.5s ease-out;
  -webkit-transition: right 0.5s ease-out, bottom 0.5s ease-out;
  transition: right 0.5s ease-out, bottom 0.5s ease-out;
}
div.active {
  right: -100px !important;
  bottom: -100px !important;
  -moz-transition: right 0.5s ease-out, bottom 0.5s ease-out;
  -webkit-transition: right 0.5s ease-out, bottom 0.5s ease-out;
  transition: right 0.5s ease-out, bottom 0.5s ease-out;
}

/*
    SNSボタン部分
*/


#modal-content {
    width: 50% ;
    margin: 0 ;
    padding: 10px 20px ;
    border: 2px solid #aaa ;
    background: #fff ;
    position: fixed ;
    display: none ;
    z-index: 2 ;
}

#modal-overlay {
    z-index: 1 ;
    display: block ;
    position: fixed ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 120% ;
    background-color: rgba( 0,0,0, 0.40 ) ;
}

.button-link {
    color: #00f ;
    text-decoration: underline ;
}

.button-link:hover {
    cursor: pointer ;
    color: #f00 ;
}

以下HTML5

<body>

    <d  iv class="nav-wrap">
        <header>
            <div id="header_title" >
            <a href="./"><h2>BDM</h2></a>
                </div>
            <div class="gnav-btn">
                <div class="icon-animation">
                    <span class="top"></span>
                    <span class="middle"></span>
                    <span class="bottom"></span>
                </div>
            </div>
        </header>
        <nav>
            <ul class="gnav">
                <li><a href=""></a></li>    
                <li><a href=""></a></li>
                <li><a href="">カテゴリーリスト</a></li>
                <li><a href="">＃TagList</a></li>
                <li><a href=""></a></li>
            </ul>
        </nav>
    </div>
    <div class="wrapper">
        <h1>sample</h1>
        <section id="top_content">
            <div class="top_pic">
            <img src="http://lorempixel.com/400/200" alt="トップ画像">
                </div>
            <div>
                <p id="title">
                         <Titile><h3>kokonutitle</h3></Titile>
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
            </div>
        </section>

  </div>

    <!--以下、片手メニュー-->
    <div id="menu">
        <ul>
            <li><a href="./"><img src="" alt="ホーム" /></a></li>
            <li><a href="./"><img src="" alt="検索" /></a></li>
            <!--以下SNS拡散フォーム-->
            <li>

                <p><a id="modal-open" class="button-link">クリックするとモーダルウィンドウを開きます。</a></p>

            </li>
            <!--ここまでSNS拡散-->
            <li id="openMenu"><img src="" alt="メニューを開く" /></li>
            <li id="closeMenu">メニューを閉じる</li>
        </ul>   
    </div>


    <footer>Footer</footer>
        <div id="modal-content">
            <!-- モーダルウィンドウのコンテンツ開始 -->
            <p>モーダルウィンドウのコンテンツをHTMLで自由に編集することができます。画像や、動画埋め込みなど、お好きなものを入れて下さい。</p>
            <p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
            <p><a id="modal-close" class="button-link">閉じる</a></p>
            <!-- モーダルウィンドウのコンテンツ終了 -->
        </div>

</body>