JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="orver">
 <div id="wrap">
 <div id="contents">
  <a id="modal-open" class="button-link">ボタン画像</a>
...

CSS

#modal-content {
 width: 90% ;
 margin: 0 ;
 padding: 20px ;
 background: #BCFAEE;
 position: fixed ;
 display: none ;
 z-index: 2 ;
font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

#modal-content-innar{
 margin:0 auto;
 width:100%;
}

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

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

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

.custmaer-voice-wrap{
    overflow: scroll;
    height: 400px;
}

.voice-area{
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
}

.voice-area p:first-child{
    border-left: 3px #BCFAEE solid;
    border-bottom: 1px #BCFAEE solid;
    padding-left: 5px;
    margin-bottom: 5px;
    font-size: 2.0rem;
}

.voice-area p:nth-child(even){
    font-size: 1.2rem;
    color: orange;
}

.voice-area p:nth-child(even) span{
    display: inline-block;
    border-radius: 3px;
    background-color: orange;
    color: white;
    text-align: center;
    padding: 1px 3px;
    margin-right: 3px;
}

.voice-area p:last-child{
    margin-top: 10px;
    font-size: 1.7rem;
}

JavaScript

//グローバル変数 (関数外)
sX_syncerModal = 0 ;
sY_syncerModal = 0 ;

$(function(){
 $("#modal-open").click(function(){
 //キーボード操作などにより、オーバーレイが多重起動するのを防止する
 $( this ).blur() ; //ボタンからフォーカスを外す
 if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1)
 //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;    //現在のモーダルウィンドウを削除して新しく起動する (防止策2)


//スクロール位置を記録
var dElm = document.documentElement , dBody = document.body;
sX_syncerModal = dElm.scrollLeft || dBody.scrollLeft; //現在位置のX座標
sY_syncerModal = dElm.scrollTop || dBody.scrollTop;   //現在位置のY座標

 //オーバーレイを出現させる
 $( "body" ).append( '<div id="modal-overlay"></div>' ) ;
 $( "#modal-overlay" ).fadeIn( "slow" ) ;

 //コンテンツをセンタリングする
 centeringModalSyncer() ;

 //コンテンツをフェードインする
 $( "#modal-content" ).fadeIn( "slow" ) ;
 $("body").css("position","fixed");

 //[#modal-overlay]、または[#modal-close]をクリックしたら…
 $( "#modal-overlay,#modal-close" ).unbind().click( function(){

  //スクロール位置を移動
window.scrollTo( sX_syncerModal , sY_syncerModal );

 //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
 $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){

 //[#modal-overlay]を削除する
 $("body").css("position","static");
 $('#modal-overlay').remove() ;

 } ) ;

 } ) ;

 } ) ;

 //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
 $( window ).resize( centeringModalSyncer ) ;

 //センタリングを実行する関数
 function centeringModalSyncer() {

 //画面(ウィンドウ)の幅、高さを取得
 var w = $( window ).width() ;
 var h = $( window ).height() ;

 // コンテンツ(#modal-content)の幅、高さを取得
 // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
 var cw = $( "#modal-content" ).outerWidth( {margin:true} );
 var ch = $( "#modal-content" ).outerHeight( {margin:true} );
 var cw = $( "#modal-content" ).outerWidth();
 var ch = $( "#modal-content" ).outerHeight();

 //センタリングを実行する
 $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;

 }

} ) ;