あれのことを「モーダルウィンドウ」というらしいです。
実装方法は下記サイトを参照
https://myscreate.com/pure-modal/
https://qiita.com/okauend/items/9b4be21293022595461d
複数設置可、画像、テキスト両方できるソースを作ってみました。
CSSのみで作られていますので、ワードプレスで記事しか編集できないという人にも使えるようにしたつもりです。
サンプル
ただコピペするだけで完成するモーダルウィンドゥ（cssのみで作られています）↓
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>モーダルウィンドウ</title> </head>
<style type=”text/css”>
.modal_box{
align-items: center;
display: flex;
justify-content: space-between;
margin: 0 auto;
/*横並び400px*/
width:400px;
}
.modal_wrapper {
z-index: 999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 60px 10px;
text-align: center;
}
.modal_wrapper:not(:target) {
opacity: 0;
visibility: hidden;
transition: opacity .3s, visibility .3s;
}
.modal_wrapper:target {
opacity: 1;
visibility: visible;
transition: opacity .4s, visibility .4s;
}
.modal_wrapper::after {
display: inline-block;
height: 100%;
margin-left: -.05em;
vertical-align: middle;
content: “”;
}
.modal_wrapper .modal_window {
box-sizing: border-box;
display: inline-block;
z-index: 20;
position: relative;
width: 70%;
max-width: 600px;
padding: 30px 30px 15px;
border-radius: 2px;
background: #fff;
box-shadow: 0 0 30px rgba(0, 0, 0, .6);
vertical-align: middle;
}
.modal_wrapper .modal_window .modal_content {
max-height: 80vh;
overflow-y: auto;
}
.modal_overlay {
z-index: 10;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8);
}
.modal_wrapper .modal_close {
z-index: 20;
position: absolute;
top: 0;
right: 0;
width: 35px;
color: #95979c !important;
font-size: 20px;
font-weight: 700;
line-height: 35px;
text-align: center;
text-decoration: none;
text-indent: 0;
}
.modal_wrapper .modal_close:hover {
color: #2b2e38 !important
}
/*テキスト周りの修飾*/
.modal_text {
border: 1px solid #fcc;
border-radius: 5px;
display:inline;
padding:10px;
}
</style>
<body>
<div class=”modal_box”>
<a href=”#modal01″>
<img src=”https://starlinks.jp/wp-content/uploads/2020/11/modal_window.png” alt=”modal window” width=”150″ height=”42″ />
</a>
<div class=”modal_wrapper” id=”modal01″>
<a href=”#” class=”modal_overlay”></a>
<div class=”modal_window”>
<div class=”modal_content”>
<h2>Modal window img</h2>
<p>画像リンクで開いた場合</p>
</div>
<a href=”#” class=”modal_close”>×</a>
</div>
</div>
<a href=”#modal02″>
<p class=”modal_text”>Modal window text</p>
</a>
<div class=”modal_wrapper” id=”modal02″>
<a href=”#” class=”modal_overlay”></a>
<div class=”modal_window”>
<div class=”modal_content”>
<h2>Modal window text</h2>
<p>テキストリンクで開いた場合</p>
</div>
<a href=”#” class=”modal_close”>×</a>
</div>
</div>
</div>
</body>