cssでモーダルを表示させたい

Question

画像をモーダルで表示させたいのですが、ボタンを押すとページ上部にページ内遷移をします。
原因が分からないため教えていただきたいです。

** html**

<div id="modal-block-01" class="modal-close modal-block" style="display: none;"> <div class="inner"> <button class="modal-close"><img src="./assets/img/medical/modal-close.png" width="24" alt="閉じる"></button> <div class="cont"> <div class="modal-contents"> <p class="contents-title">○○○<br class="sp">○○○</p> <div class="condition"> <div class="lead-box"> <div class="income-box"> <p class="title">○○○</p> <p class="lead"> 〇〇○○○<br class="pc">…<span class="c">ピンク点線枠</span> </p> </div> <div class="cancer-box"> <p class="title">○○○</p> <p class="lead"> ○○○^※…<span class="c">緑点線枠</span> </p> </div> </div> <ul class="modal-note"> <li>○○○</li> <li>○○○</li> </ul> <div class="img-box"> <p class="img-title">○○○</p> <picture> <source media="(max-width: 767px)" srcset="./assets/img/medical/modal_img_sp.png"> <img src="./assets/img/medical/modal_img_pc.png" alt=""> </picture> </div> </div> </div> </div> </div> </div> </div> </div>

CSS
.modal-block {
background: rgba(0, 0, 0, 0.7);
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: none;
}

.modal-block .inner .cont {
height: 100%;
overflow-y: scroll;
}

.modal-block .inner .modal-contents {
max-width: 733px;
margin: 0 auto;
padding: 40px 0 40px;
line-height: 1.5;
}

.modal-block .inner .modal-contents .condition {
margin-top: 23px;
}

.modal-block .inner .modal-contents .condition .lead-box {
font-size: 16px;
}

.modal-block .inner .modal-contents .condition .lead-box .income-box {
margin-bottom: 23px;
}

.modal-block .inner .modal-contents .contents-title {
font-size: 26px;
font-weight: bold;
border-bottom: 1px solid #DDDDDD;
padding-bottom: 14px;
text-align: center;
}

.modal-block .inner .modal-contents .condition .lead-box .income-box .title, .modal-block .inner .modal-contents .condition .lead-box .income-box .c {
color: #F25287;
}

.modal-block .inner .modal-contents .condition .lead-box .income-box {
margin-bottom: 23px;
}

.modal-block .inner .modal-contents .condition .lead-box .cancer-box .title, .modal-block .inner .modal-contents .condition .lead-box .cancer-box .c {
color: #02AF9E;
}

.modal-block .inner .modal-contents .condition .lead-box .title {
font-weight: bold;
}

.modal-block .inner .modal-contents p {
margin-bottom: 0;
}

.modal-block .inner .modal-contents .condition .lead-box .lead sup {
font-size: 10px;
}
sup {
vertical-align: baseline;
position: relative;
top: -1ex;
}

.modal-block .inner .modal-contents .condition .modal-note {
font-size: 14px;
color: #2C2C2C;
margin-top: 35px;
}

.modal-block .inner .modal-contents .condition .modal-note li {
text-indent: -1em;
padding-left: 1em;
}

.modal-block .inner .modal-contents .condition .img-box {
text-align: center;
margin-top: 28px;
}

.modal-block .inner .modal-contents .condition .img-box .img-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}

.modal-block .modal-close {
position: absolute;
top: -20px;
right: -20px;
width: 56px;
height: 56px;
border: 0;
background-color: #02AF9E;
-webkit-transition: -webkit-filter 0.3s ease;
transition: -webkit-filter 0.3s ease;
transition: filter 0.3s ease;
transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

@media screen and (max-width: 767px){
.modal-block .inner .modal-contents {
padding: 25px 15px 15px;
}
}

Comments

[Lhankor_Mhy]

markdownを使ってソースコードを書いてください。

https://teratail.com/help/question-tips#questionTips37

https://teratail-v2.storage.googleapis.com/assets/img/tour/01.webm?1594714893253494

https://teratail.com/questions/238564

Answer 1

＞ 画像をモーダルで表示させたい

<div id="modal-block-01" class="modal-close modal-block" style="display: none;">となっているため、display: none;が効いていて表示されないのだろうと思います。
おそらく、JavaScript が必要です。