CSSのみでモーダルウィンドウを作成

参考記事
https://ecmemo.net/modal-window

ビューページ

<a href="#modal-01">
        <div class="site-header">
            <div class="side-bar box-center">
                <img src="/img/side_registration.svg">
            </div>
        </div>
    </a>
    <div class="modal-wrapper-01" id="modal-01">
        <a href="#!" class="modal-overlay-01"></a>
        <div class="modal-window-01">
            <div class="modal-content-01">
                <img src="https://picsum.photos/id/1080/600" width="100%">
            </div>
            <a href="#!" class="modal-close-01">×</a>
        </div>
    </div>

css

/* Modal */

.site-header{
    position: fixed;
    top: 0;
    right:0px;
    z-index:20;
  }

.side-bar {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #F7F6F1;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
.modal-wrapper-01 {
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 60px 10px;
    text-align: center
  }
  
  .modal-wrapper-01:not(:target) {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }
  
  .modal-wrapper-01:target {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s, visibility .4s;
  }
  
  .modal-wrapper-01::after {
    display: inline-block;
    height: 100%;
    margin-left: -.05em;
    vertical-align: middle;
    content: ""
  }
  
  .modal-wrapper-01 .modal-window-01 {
    box-sizing: border-box;
    display: inline-block;
    z-index: 20;
    position: relative;
    width: 70%;
    max-width: 700px;
    padding: 3rem 3rem 3rem;
    border-radius: 2px;
    background: #fff;
    vertical-align: middle
  }
  
  .modal-wrapper-01 .modal-window-01 .modal-content-01 {
    max-height: 80vh;
    overflow-y: auto;
  }
  
  .modal-overlay-01 {
    z-index: 10;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .8)
  }
  
  .modal-wrapper-01 .modal-close-01 {
    z-index: 20;
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    color: #95979c !important;
    text-align: center;
    text-decoration: none;
    text-indent: 0
  }
  
  .modal-wrapper-01 .modal-close-01:hover {
    color: #2b2e38 !important
  }