質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

受付中

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

yamamonmon
yamamonmon

総合スコア16

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

0クリップ

198閲覧

投稿2022/01/25 10:09

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

** 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"> ○○○<sup>※</sup>…<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;
}
}

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。