モーダルを複数設置して、モーダル内にbxsliderでスライド表示したい

前提

モーダルを複数設置してモーダル内にbxsliderでスライド表示させたいのですが、モーダルの中身が二重に重なってしまいます。

実現したいこと

モーダルを複数設置
モーダルを開くボタンのdata-target="modal-01"をクリックすると、モーダルの中身id="modal-01"を表示させたい

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja" prefix="og: http://ogp.me/ns#">
3<head>
4<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--IE標準モード-->
5<meta charset="UTF-8">
6<meta name="viewport" content="width=device-width">
7<meta name="format-detection" content="telephone=no">
8<title>モーダル</title>
9<link href="/assets/css/jquery.bxslider.css" rel="stylesheet" />
10
11<!--     CSS     -->
12<link rel="stylesheet" href="/assets/css/modal.css">
13<!--   LIBRARY   -->
14<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
15<script src="/assets/js/jquery.bxslider.min.js"></script>
16<script>
17    $(function(){
18        $('.bxslider_modal').bxSlider({
19        auto:true,
20        touchEnabled:true,
21        maxSlides:1,
22        minSlides:1,
23        auto:false,
24        pause:3000,
25        pager:false
26        });
27    });
28</script>
29<script>
30  $(function(){
31	// 変数に要素を入れる
32	var open = $('.modal-open'),
33		close = $('.modal-close'),
34		container = $('.modal-container');
35
36	//開くボタンをクリックしたらモーダルを表示する
37	open.on('click',function(){	
38		container.addClass('active');
39		return false;
40	});
41
42	//閉じるボタンをクリックしたらモーダルを閉じる
43	close.on('click',function(){	
44		container.removeClass('active');
45	});
46
47  	//複数設置
48  var target = $(this).data('target');
49    var modal  = document.getElementById(target);
50});
51</script>
52
53</head>
54
55<body>
56
57<div class="modal-open" data-target="modal-01" style="padding:100px;">モーダルを開く</div>
58<div class="modal-container" id="modal-01">
59  <div class="modal-close">×</div>
60    <div class="modal-body">
61      <div class="modal-content">
62        <div id="slider">
63          <div class="slide-wrap">
64              <ul class="bxslider_modal">
65                  <li class="box_modal">
66                    <div class="box_right_margin">
67                      <div class="box_modal_inner">
68                        <div class="box_img_modal"><img src="/img/img_stay_04.jpg" class="img shadows"></div>
69                        <div class="box_txt_modal">
70                          <p class="ttl_01">modal-01のタイトル１枚目</p>
71                          <p class="txt_01">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
72                          <p class="txt_01">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
73                          <p class="txt_01">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
74                          <p class="txt_01">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
75                        </div>
76                      </div>
77                    </div>
78                    <div class="modal_numb">1/2</div>
79                  </li>
80                  <li class="box_modal">
81                    <div class="box_right_margin">
82                      <div class="box_modal_inner">
83                        <div class="box_img_modal"><img src="/img/img_stay_04.jpg" class="img shadows"></div>
84                        <div class="box_txt_modal">
85                          <p class="ttl_01">modal-01のタイトル２枚目</p>
86                          <p class="txt_01">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
87                          <p class="txt_01">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
88                        </div>
89                      </div>
90                    </div>
91                    <div class="modal_numb">2/2</div>
92                  </li>
93              </ul>
94          </div>
95        </div>      
96      <!-- _slider -->
97    </div>
98    <!-- _modal-content -->
99  </div>
100  <!-- _modal-body -->
101</div>
102<!-- _modal-container -->
103
104
105<div class="modal-open" data-target="modal-02">モーダルを開く</div>
106<div class="modal-container" id="modal-02">
107  <div class="modal-close">×</div>
108    <div class="modal-body">
109      <div class="modal-content">
110        <div id="slider">
111          <div class="slide-wrap">
112              <ul class="bxslider_modal">
113                  <li class="box_modal">
114                    <div class="box_right_margin">
115                      <div class="box_modal_inner">
116                        <div class="box_img_modal"><img src="/img/img_stay_04.jpg" class="img shadows"></div>
117                        <div class="box_txt_modal">
118                          <p class="ttl_01">modal-02のタイトル１枚目</p>
119                          <p class="txt_01">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
120                          <p class="txt_01">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
121                          <p class="txt_01">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
122                          <p class="txt_01">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
123                        </div>
124                      </div>
125                    </div>
126                    <div class="modal_numb">1/2</div>
127                  </li>
128                  <li class="box_modal">
129                    <div class="box_right_margin">
130                      <div class="box_modal_inner">
131                        <div class="box_img_modal"><img src="/img/img_stay_04.jpg" class="img shadows"></div>
132                        <div class="box_txt_modal">
133                          <p class="ttl_01">modal-02のタイトル２枚目</p>
134                          <p class="txt_01">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
135                          <p class="txt_01">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
136                        </div>
137                      </div>
138                    </div>
139                    <div class="modal_numb">2/2</div>
140                  </li>
141              </ul>
142          </div>
143        </div>      
144      <!-- _slider -->
145    </div>
146    <!-- _modal-content -->
147  </div>
148  <!-- _modal-body -->
149</div>
150<!-- _modal-container -->
151
152</body>
153</html>

css
1
2/* modal.css */
3
4
5
6/* モーダルの中身
7---------------------------------------------------------- */
8.modal-content {
9  width: 900px;
10}
11.modal-content ul.bxslider_modal {
12  width: 900px;
13}
14.modal-content ul.bxslider_modal li.box_modal {
15  margin: 0 10px 0 0;
16}
17.modal-content ul.bxslider_modal li.box_modal .modal_numb {
18  text-align: center;
19  font-size: 16px;
20  padding: 20px 0 0;
21  color: #E6DED0;
22}
23.modal-content ul.bxslider_modal li.box_modal .box_right_margin {
24  background-color: #fff;
25  width: 890px;
26  padding-right: 10px;
27}
28.modal-content ul.bxslider_modal li.box_modal .box_modal_inner {
29  width:890px ;
30  height: 408px;
31  overflow-y: scroll;
32  margin: 0 auto;
33  display: flex;
34  justify-content: space-between;
35}
36.modal-content ul.bxslider_modal li.box_modal .box_modal_inner .box_img_modal {
37  width: 380px;
38  padding: 40px 0 40px 50px;
39}
40.modal-content ul.bxslider_modal li.box_modal .box_modal_inner .box_txt_modal {
41  width: 380px;
42  padding: 40px 30px 40px 0;
43  height: auto;
44}
45.modal-content ul.bxslider_modal li.box_modal .box_modal_inner .box_txt_modal .ttl_01 {
46  font-size: 24px;
47}
48.modal-content ul.bxslider_modal li.box_modal .box_modal_inner .box_txt_modal .txt_01 {
49  padding: 0 0 13px;
50  font-size: 14px;
51}
52
53
54/* スクロールバー
55---------------------------------------------------------- */
56/* スクロールバー全体 */
57.box_modal_inner::-webkit-scrollbar {
58  width: 4px; /* 垂直方向のスクロールバーの幅 */
59  height:4px; /* 水平方向のスクロールバーの幅 */
60}
61/* スクロールバー背景 */
62.box_modal_inner::-webkit-scrollbar-track {
63  background: #ffffff;
64}
65/* スクロールバーつまみ */
66.box_modal_inner::-webkit-scrollbar-thumb {
67  background: #6A1733;
68  border-radius: 4px;
69}
70/* スクロールバー矢印ボタン */
71.box_modal_inner::-webkit-scrollbar-button {
72  background: #ffffff;
73}
74
75
76
77/* モーダル本体
78---------------------------------------------------------- */
79  /*モーダル本体の指定 + モーダル外側の背景の指定*/
80  .modal-container{
81    position: fixed;
82    top: 0;
83    left: 0;
84    width: 100%;
85    height: 100%;
86    text-align: center;
87    background: rgba(0,0,0,50%);
88    padding: 40px 20px;
89    overflow: auto;
90    opacity: 0;
91    visibility: hidden;
92    transition: .3s;
93    box-sizing: border-box;
94    z-index: 99999999;
95  }
96  /*モーダル本体の擬似要素の指定*/
97  .modal-container:before{
98    content: "";
99    display: inline-block;
100    vertical-align: middle;
101    height: 100%;
102  }
103  /*モーダル本体に「active」クラス付与した時のスタイル*/
104  .modal-container.active{
105    opacity: 1;
106    visibility: visible;
107  }
108  /*モーダル枠の指定*/
109  .modal-body{
110    position: relative;
111    display: inline-block;
112    vertical-align: middle;
113    width: 900px;
114  }
115  /*モーダルを閉じるボタンの指定*/
116  .modal-close{
117    position: absolute;
118    display: flex;
119    align-items: center;
120    justify-content: center;
121    top: 40px;
122    right: 40px;
123    width: 40px;
124    height: 40px;
125    font-size: 40px;
126    color: #fff;
127    cursor: pointer;
128    z-index: 9999999999;
129  }
130  /*モーダル内のコンテンツの指定*/
131  .modal-content{
132    /*background: #fff;*/
133    background: none;
134    text-align: left;
135    padding: 30px;
136    color: #1A1A1A;
137  }