modal-multi.js
<!DOCTYPE html>
<html lang="ja-JP">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/modal-multi.js"></script>
<style>
.modal-content {
width: 50% ;
margin: 0 ;
padding: 10px 20px ;
border: 2px solid #aaa ;
background: #fff ;
position: fixed ;
display: none ;
z-index: 2 ;
}
#modal-overlay {
z-index: 1 ;
display: none ;
position: fixed ;
top: 0 ;
left: 0 ;
width: 100% ;
height: 120% ;
background-color: rgba( 0,0,0, 0.75 ) ;
}
.button-link {
color: #00f ;
text-decoration: underline ;
}
.button-link:hover {
cursor: pointer ;
color: #f00 ;
}
</style>
</head>
<body>
<!-- 1つ目のコンテンツ [開始] -->
<div id="modal-content-01" class="modal-content">
<!-- モーダルウィンドウのコンテンツ開始 -->
<p>1つ目のモーダルウィンドウです。全体を囲むdiv要素に[id="modal-content-01"]が設定されています。</p>
<p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
<p><a id="modal-close" class="button-link">閉じる</a></p>
<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 1つ目のコンテンツ [終了] -->
<!-- 2つ目のコンテンツ [開始] -->
<div id="modal-content-02" class="modal-content">
<!-- モーダルウィンドウのコンテンツ開始 -->
<p>2つ目のモーダルウィンドウです。全体を囲むdiv要素に[id="modal-content-02"]が設定されています。</p>
<p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
<p><a id="modal-close" class="button-link">閉じる</a></p>
<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 2つ目のコンテンツ [終了] -->
<!-- 3つ目のコンテンツ [開始] -->
<div id="modal-content-03" class="modal-content">
<!-- モーダルウィンドウのコンテンツ開始 -->
<p>3つ目のモーダルウィンドウです。全体を囲むdiv要素に[id="modal-content-03"]が設定されています。</p>
<p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
<p><a id="modal-close" class="button-link">閉じる</a></p>
<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<p><a class="modal-syncer button-link" data-target="modal-content-01">クリックすると、1つ目のモーダルウィンドウを開きます。</a></p>
<p><a class="modal-syncer button-link" data-target="modal-content-02">クリックすると、2つ目のモーダルウィンドウを開きます。</a></p>
<p><a class="modal-syncer button-link" data-target="modal-content-03">クリックすると、3つ目のモーダルウィンドウを開きます。</a></p>
<!-- 3つ目のコンテンツ [終了] -->
</body>
</html>