各ページにあるメニューから index.html へ遷移後、index 内にある指定のモーダルを開きたいです

全ページに共通のメニューがあり、下層ページからでもindexページ遷移後に指定のモーダルを開けるようにしたいです。

index.html 単体で動きの確認はできたのですが、
下層ページからindex.html へ遷移した後に指定のモーダルを開くという処理がわからない状態です...

追記：質問いただいたので、modal は jQueryでプラグイン・フレームワークは使っていないです。（チームの人間が過去に用意したコードをもとにしています）

----- 共通メニュー

HTML
1<header class="l-header">
2	<nav class="l-nav">
3		<div class="nav-body wrap">
4			<ul class="list-nav">
5				<li><a class="js-modal-open" href="" data-target="modal01">index内のモーダル01を開く</a></li>
6				<li><a class="js-modal-open" href="" data-target="modal02">index内のモーダル02を開く</a></li>
7				<li><a class="js-modal-open" href="" data-target="modal03">index内のモーダル03を開く</a></li>
8			</ul>
9		</div>
10	</nav>
11</header>

index.html

HTML
1<div class="l-trigger">
2	<div class="btn01">
3		<button class="modal-trigger js-modal-open" data-target="modal01">モーダル01を開く</button>
4	</div>
5	<div class="btn02">
6		<button class="modal-trigger js-modal-open" data-target="modal02">モーダル02を開く</button>
7	</div>
8	<div class="btn03">
9		<button class="modal-trigger js-modal-open" data-target="modal03">モーダル03を開く</button>
10	</div>
11</div>
12
13<div id="modal01" class="modal-body">
14	<div class="modal-content">
15		<div class="content-wrap">
16			<div id="overlay" class="modal-bg"></div>
17			<h2 class="ttl-modal">モーダル01</h2>
18		</div>
19	</div>
20	<p class="btn-close">×</p>
21</div>
22
23<div id="modal02" class="modal-body">
24	<div class="modal-content">
25		<div class="content-wrap">
26			<div id="overlay" class="modal-bg"></div>
27			<h2 class="ttl-modal">モーダル02</h2>
28		</div>
29	</div>
30	<p class="btn-close">×</p>
31</div>
32
33<div id="modal03" class="modal-body">
34	<div class="modal-content">
35		<div class="content-wrap">
36			<div id="overlay" class="modal-bg"></div>
37			<h2 class="ttl-modal">モーダル03</h2>
38		</div>
39	</div>
40	<p class="btn-close">×</p>
41</div>

----- css

CSS
1.modal-body {
2	position: fixed;
3	top: 0;
4	left: 0;
5	width: 100%;
6	height: 100vh;
7	opacity: 0;
8	transition: all ease .3s;
9	z-index: 200;
10	pointer-events: none;
11}
12
13.modal-body.active {
14	opacity: 1;
15	pointer-events: all;
16}
17
18.modal-bg {
19	position: fixed;
20	top: 0;
21	left: 0;
22	width: 100%;
23	height: 100%;
24	background-color: rgba(0,0,0,.9);
25	z-index: -1;
26}
27
28.modal-content {
29	position: fixed;
30	left: 50%;
31	top: 50%;
32	width: 100%;
33	min-height: 100%;
34	transform: translate(-50%, -50%);
35	display: flex;
36	justify-content: center;
37	align-items: center;
38	padding: 10px;
39	pointer-events: none;
40	color: #fff;
41}
42
43.modal-body.active .modal-bg {
44	pointer-events: auto;
45}
46
47.btn-close {
48	position: absolute;
49	top: 60px;
50	right: 50px;
51	width: 59px;
52	height: 59px;
53	display: flex;
54	cursor: pointer;
55	transition: opacity ease .3s;
56	font-size: 2rem;
57	color: #fff;
58}
59
60.btn-close:hover {
61	opacity: .5;
62}

----- js (jQuery)

jQuery
1var nav      = $('.l-nav');
2
3
4// ========================================
5//  modal
6// ========================================
7$('.modal-trigger').on('click', function(){
8	$(this).addClass('active');
9	$(this).parent('.l-trigger').addClass('active');
10
11	if($(this).hasClass('active')) {
12		$(this).next('.modal-body').addClass('active');
13	} else {
14		$(this).next('.modal-body').removeClass('active');
15	}
16});
17
18$('.btn-close, .modal-bg').on('click', function(){
19	$('.l-trigger, .modal-trigger, .modal-body').removeClass('active');
20	return false;
21});
22
23$('.js-modal-open').each(function(){
24	$(this).on('click',function(){
25		nav.removeClass('active');
26
27		var target = $(this).data('target');
28		var modal = document.getElementById(target);
29		$(modal).addClass('active');
30		$(modal).siblings('.modal-trigger').addClass('active');
31		$(modal).parent('.l-trigger').addClass('active');
32
33		return false;
34	});
35});