画像をクリックすると横からスライドで表示されるｊｓに、追加で「表示されてる部分以外を暗くする」実装をつけたいのと、修正で閉じ方の動きを変えたいです。

Question

前提・実現したいこと

jsで画像をクリックすると横（左側）からスライドで表示される実装を作っています。
現状、表示された部分とそれ以外の境界線がわかりにくいのと、閉じる動きは横から表示されている部分以外をクリックすると閉じるような動きになっています。
以下の内容を実現したいです。

１.横から表示されると、それ以外の部分を暗くしたい
２.横から表示された部分内に、「☓」のアイコンがあり、☓をクリックすると閉じるように変更したい

発生している問題・エラーメッセージ

まだ、js初心者で勉強中の為、自分でカスタマイズする事が難しい状態。

自分で「閉じるボタン」と「表示以外を暗くする」htmlとcssは書いてみました。該当のソースコード内にあります。

該当のソースコード

<!--この画像をクリックすると横からスライドで表示-->
 <div id="menu1">
　　　<img class="con1-bg-i-1" src="＃" alt="画像">
　</div>

<!--横から出てくる内容-->
  <div id="menuContent1">
　　　<!--「☓」のアイコン-->  
　　　<div class="close">×</div>	
　　　　　　<p class="line-b">横から出てくるテキストが入ります</p>
	</div>	

　　　　　<!--表示されてる部分以外を暗くする-->
　　　　<div class="mask2"></div>
	
<script>
$(function() {
  $('#menu1').click(function() {
    $('#menuContent1').animate({left: '0'}, 750);
    $('body').append('<p class="dummy"></p>');
  });
  $('body').on('click', '.dummy', function() {
    $('#menuContent1').animate({left: '-750px'}, 750);
    $('p.dummy').remove();
  });
});
</script>


#menu1 {
    margin: 10% 0 0 -4%;
    filter: drop-shadow(-8px 9px 9px rgba(0,0,0,0.1));
}
#menuContent1 {
  width: 750px;
  height: 100%;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: -750px;
  z-index: 900;
  overflow-y: auto;
}
/*横から表示したのを、閉じるアイコン*/
.close {
    font-size: 70px;
    margin-left: 90%;
}	

/*表示されてる部分以外を暗くする*/
#mask2 {
 display: none;
}
.open #mask2 {
 display: block;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #000;
 opacity: .8;
 z-index: 2;
 cursor: pointer;
 transition: all .5s;
}

試したこと

自分で「閉じるボタン」と「表示以外を暗くする」htmlとcssは書きましたが、これをスクリプト内にどう命令したらよいでしょうか？また、間違えがあれば、修正ヶ所も知りたいです。

補足情報（FW/ツールのバージョンなど）

アドビのドリームウィーバー2019を使用しています。

Comments

[phper.k]

「〜して欲しい」は作業依頼であって、質問ではありません。
こちらのページに書かれている通り、「推奨されない」行為です。書き方を工夫してください。
https://teratail.com/help/avoid-asking

[rieeeeee]

書き方を気をつけます。

Answer 1

ちょっと適当に

<style>
.dummy{
top:0;
left:0;
  width: 100%;
  height: 100%;
  background-color:black;
  position:absolute;
  z-index:1;
opacity:0.5;
}
#menuContent1 {
  width: 750px;
  height: 100px;
  background-color: yellow;
  position:absolute;
  z-index:2;
}
</style>
<script>
$(function() {
  $('#menuContent1').css({left:-750});
  $('#menu1').on('click',function() {
    $('#menuContent1').animate({left: '0'}, 750);
    $('body').append($('<div class="dummy"></div>'));
  });
  $('.close').on('click',function() {
    $('#menuContent1').animate({left:-750}, 750).queue(function(){
      $('.dummy').remove();
      $(this).dequeu();
    });
  });
});
</script>
<div id="menu1">
<img class="con1-bg-i-1" src="＃" alt="画像">
</div>

<div id="menuContent1">
<!--「?」のアイコン-->  
<div class="close">×</div>    
<p class="line-b">横から出てくるテキストが入ります</p>
</div>

Comments

[rieeeeee]

ご回答頂き、ありがとうございます。
☓のアイコンをクリックすると閉じる動きが実現しました。

しかし、もう１つの「横からスライドで出てきた際にその表示以外が、暗くなる」が実装できません。
また、私のソースコードでは問題なかったのですが回答して頂いたコードですと、
画像をクリックして１回目は開いて閉じるのですが、それ以降画像をクリックしても反応せず、横からでてきません。

色々構ってみたのですが実現できず、もう少し詳細がわかれば聞きたいです。
宜しくお願い致します。