jQueryでモーダル機能がうまく作れない。

Question

前提・実現したいこと

モーダル機能を作っており、モーダルが機能した後に背景をクリックしても閉じるようにしたいのですがうまくできないです。具体的に作っているコードの説明としてはボタンを押してモーダルが機能したら、背景に.modal-overlayクラスを追加して、背景と、閉じるボタンをクリックしたらfadeOutするという仕組みです。
どの部分が間違えているのでしょうか？？よろしくお願いいたします。

該当のソースコード

    <button class="modal-open">モーダル起動ボタン</button>
    <div id="modal-content">
        <p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
        <p><a id="modal-close" class="button-link">閉じる</a></p>
    </div>

#modal-content{
    display:none;
    position:absolute;
    top:50%;
    left:20%;
    background-color:white;
    padding:2rem;
    z-index:10;
}

.modal-overlay{
    width:100%;
	height:120%;
	position:fixed;
	top:0;
	left:0;
    background-color:rgba(0,0,0,0.8);
    z-index:3;
}

    $(".modal-open").click(
        function(){
            $(this).next().stop().fadeIn(400);
            $("body").append('<div class="modal-overlay"></div>');
            $(".modal-overlay").fadeIn("slow");
        }
    );

    $( ".modal-overlay,#modal-close").click( function(){
		$( "#modal-content,.modal-overlay" ).fadeOut( "slow" , function(){
			$('.modal-overlay').remove() ;
		}) ;
	} ) ;

Answer 1

jQuery-uiを利用するなら

<button class="modal-open" data-title="テストダイアログ1">モーダル起動ボタン</button>
<div id="modal-content">
<p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
</div>

Comments

[yambejp]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
$( document ).on( "click", ".ui-widget-overlay", function(){
$(this).prev().find(".ui-dialog-content").dialog("close");
} );
$('#modal-content').hide();
$(".modal-open").on('click',function() {
$("#modal-content").dialog({
modal:true,
title:$(this).data('title'),
buttons: {
"閉じる": function() {
$(this).dialog("close");
}
}
});
});
});
</script>