開いたモーダルウィンドウから別のモーダルウィンドウを開きたい

前提・実現したいこと

Aのモーダルウィンドウを開き、モーダルウィンドウ内にボタンを設置して、クリックすればAのモーダルウィンドウが閉じ、Bなどのクリックしたモーダルウィンドウが開くという事をしたいのですが、思った動きが出来ず困っております。
お力添えいただけないでしょうか。。。

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

自身で行ってみると、
開いているモーダルウィンドウが消えず、重なってしまう。
一瞬Bのモーダルウィンドウの中が見えて、消えてしまい、Aのモーダルウィンドウがそのまま残る。
という感じです。。。

試したこと

色々調べてやってみたのですが、
モーダルウィンドウの背景が固定されなかったり、
AのモーダルウィンドウからBのモーダルウィンドウを開けても、BのモーダルウィンドウにあるAのモーダルウィンドウへのボタンを押すとAのモーダルウィンドウのトップではなく、Bのモーダルウィンドウを開いたボタンの位置のままになってしまったりと、困っております。

該当のソースコード

HTML
1<div class="service-area">
2	<ul class="service-list">
3		<li>
4			<img class="modal-s1" src="aaa.jpg" alt="s1へ" />
5		</li>
6		<li>
7			<img class="modal-s2" src="bbb.jpg" alt="s2へ" />
8		</li>
9		<li>
10			<img class="modal-s3" src="ccc.jpg" alt="s3へ" />
11		</li>
12		<li>
13			<img class="modal-s4" src="ddd.jpg" alt="s4へ" />
14		</li>
15	</ul>
16</div>
17
18<!-- モーダルウィンドウA -->
19<div class="overlay-s1">
20	<div class="container">
21		<div class="inner">
22			<div class="modal">
23				<h4>AAA</h4>
24				<p>テキストテキスト</p>
25				<div class="service-select">
26					<ul class="select-list">
27						<li>
28							<img class="modal-s1" src="aaa.jpg" alt="s1へ" />
29						</li>
30						<li>
31							<img class="modal-s2" src="bbb.jpg" alt="s2へ" />
32						</li>
33						<li>
34							<img class="modal-s3" src="ccc.jpg" alt="s3へ" />
35						</li>
36						<li>
37							<img class="modal-s4" src="ddd.jpg" alt="s4へ" />
38						</li>
39					</ul>
40				</div>
41			</div>
42		</div>
43	</div>
44</div>
45<!-- //モーダルウィンドウA -->
46
47<!-- モーダルウィンドウB -->
48<div class="overlay-s2">
49	<div class="container">
50		<div class="inner">
51			<div class="modal">
52				<h4>AAA</h4>
53				<p>テキストテキスト</p>
54				<div class="service-select">
55					<ul class="select-list">
56						<li>
57							<img class="modal-s1" src="aaa.jpg" alt="s1へ" />
58						</li>
59						<li>
60							<img class="modal-s2" src="bbb.jpg" alt="s2へ" />
61						</li>
62						<li>
63							<img class="modal-s3" src="ccc.jpg" alt="s3へ" />
64						</li>
65						<li>
66							<img class="modal-s4" src="ddd.jpg" alt="s4へ" />
67						</li>
68					</ul>
69				</div>
70			</div>
71		</div>
72	</div>
73</div>
74<!-- //モーダルウィンドウB -->
75
76<!-- モーダルウィンドウC -->
77<div class="overlay-s3">
78	
79</div>
80<!-- //モーダルウィンドウC -->
81
82<!-- モーダルウィンドウD -->
83<div class="overlay-s4">
84	
85</div>
86<!-- //モーダルウィンドウD -->

JavaScript
1
2$(function() {
3
4var $window = $(window),
5    $html = $('html'),
6    $body = $('body'),
7    $overlay = $('.overlay-s1'),
8    scrollbar_width = window.innerWidth - document.body.scrollWidth,
9    touch_start_y;
10
11$window.on('touchstart', function(event) {
12  touch_start_y = event.originalEvent.changedTouches[0].screenY;
13});
14
15$('.modal-s1').on('click', function() {
16  $window.on('touchmove.noscroll', function(event) {
17    var overlay = $overlay[0],
18        current_y = event.originalEvent.changedTouches[0].screenY,
19        height = $overlay.outerHeight(),
20        is_top = touch_start_y <= current_y && overlay.scrollTop === 0,
21        is_bottom = touch_start_y >= current_y && overlay.scrollHeight - overlay.scrollTop === height;
22    
23    if (is_top || is_bottom) {
24      event.preventDefault();
25    }
26  });
27  
28  $('html').css('overflow', 'hidden');
29  
30  if (scrollbar_width) {
31    $html.css('padding-right', scrollbar_width);
32  }
33  
34  $overlay.fadeIn(300);
35});
36
37var closeModal = function() {
38  $body.removeAttr('style');
39  $window.off('touchmove.noscroll');
40  
41  $overlay.animate({
42    opacity: 0
43  }, 300, function() {
44    $overlay.scrollTop(0).hide().removeAttr('style');
45    $html.removeAttr('style');
46  });
47};
48
49$overlay.on('click', function(event) {
50  if (!$(event.target).closest('.modal').length) {
51    closeModal();
52  }
53});
54
55$('.button').on('click', function() {
56  closeModal();
57});
58
59});
60
61$(function() {
62
63var $window = $(window),
64    $html = $('html'),
65    $body = $('body'),
66    $overlay = $('.overlay-s2'),
67    scrollbar_width = window.innerWidth - document.body.scrollWidth,
68    touch_start_y;
69
70$window.on('touchstart', function(event) {
71  touch_start_y = event.originalEvent.changedTouches[0].screenY;
72});
73
74
75$('.modal-s2').on('click', function() {
76  $window.on('touchmove.noscroll', function(event) {
77    var overlay = $overlay[0],
78        current_y = event.originalEvent.changedTouches[0].screenY,
79        height = $overlay.outerHeight(),
80        is_top = touch_start_y <= current_y && overlay.scrollTop === 0,
81        is_bottom = touch_start_y >= current_y && overlay.scrollHeight - overlay.scrollTop === height;
82    
83    if (is_top || is_bottom) {
84      event.preventDefault();
85    }
86  });
87  
88  $('html').css('overflow', 'hidden');
89  
90  if (scrollbar_width) {
91    $html.css('padding-right', scrollbar_width);
92  }
93  
94  $overlay.fadeIn(300);
95});
96
97var closeModal = function() {
98  $body.removeAttr('style');
99  $window.off('touchmove.noscroll');
100  
101  $overlay.animate({
102    opacity: 0
103  }, 300, function() {
104    $overlay.scrollTop(0).hide().removeAttr('style');
105    $html.removeAttr('style');
106  });
107};
108
109$overlay.on('click', function(event) {
110  if (!$(event.target).closest('.modal').length) {
111    closeModal();
112  }
113});
114
115$('.button').on('click', function() {
116  closeModal();
117});
118
119});
120
121
122$(function() {
123
124var $window = $(window),
125    $html = $('html'),
126    $body = $('body'),
127    $overlay = $('.overlay-s3'),
128    scrollbar_width = window.innerWidth - document.body.scrollWidth,
129    touch_start_y;
130
131$window.on('touchstart', function(event) {
132  touch_start_y = event.originalEvent.changedTouches[0].screenY;
133});
134

css
1.overlay-s1{
2	display: none;
3	position: fixed;
4	top: -10px;
5	left: 0;
6	right: 0;
7	bottom: -10px;
8	background-color: rgba(0, 0, 0, .7);
9	overflow: hidden;
10	overflow-y: auto;
11	-webkit-overflow-scrolling: touch;
12	-webkit-backface-visibility: hidden;
13	backface-visibility: hidden;
14	z-index: 9997;
15}
16
17.overlay-s2{
18	display: none;
19	position: fixed;
20	top: -10px;
21	left: 0;
22	right: 0;
23	bottom: -10px;
24	background-color: rgba(0, 0, 0, .7);
25	overflow: hidden;
26	overflow-y: auto;
27	-webkit-overflow-scrolling: touch;
28	-webkit-backface-visibility: hidden;
29	backface-visibility: hidden;
30	z-index: 9997;
31}
32
33.container{
34	display: table;
35	padding: 10px 0;
36	width: 100%;
37	height: 100%;
38}
39
40.inner{
41	display: table-cell;
42	padding: 5.2% 0;
43	vertical-align: middle;
44}
45
46.modal{
47	width: 78.125vw;
48	background: #fff;
49	color: #707070;
50	margin: 0 auto;
51	z-index: 9998;
52}
53
54.modal::after{
55	display: table;
56	content: '';
57	clear: both;
58}