page モーダル（ポップアップ）

最終更新：2021/07/30

page.jsの「js-modal-open」などの部分が必要です。

下の「詳しく見る」をクリックすると表示されます。

html

  <div class="bt_st"><a class="js-modal-open" href="" data-target="modal01">詳しく見る</a></div>
  <div id="modal01" class="st_modal js-modal">
    <div class="modal__bg js-modal-close"></div>
    <div class="modal__content">
      <a class="js-modal-close" href="">×</a>
      <div class="row">
        <div class="col-sm-12">
			テキストや画像などを表示できます。
          </div>
        </div>
      </div><!--modal__inner-->
  </div><!--modal-->

<div class="bt_st"><a class="js-modal-open" href="" data-target="modal01">詳しく見る</a></div>

テキストや画像などを表示できます。

</div>

</div>

</div>

css

.bt_st{
    margin: 0 auto;
    padding: 10px 0 50px;
	text-align: center;
}
.st_box{
    background: #eee;
    height: 200px;
    margin-bottom: 100px;
}
.st_modal{
    display: none;
    height: 100vh;
    position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
    top: 0;
    width: 100%;
	z-index: 999999;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #565656;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	max-height: 80%;
	color: #fff;
}
.modal__content a{
	color: #fff;
	font-size: 2em;
	display: block;
	position: absolute;
	right: 20px;
	top: 10px;
	text-decoration: none;
}
@media screen and (min-width: 769px){
.modal__content{
    background: #565656;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	max-height: 80%;
	color: #fff;
}
}

.bt_st{

margin: 0 auto;

padding: 10px 0 50px;

text-align: center;

}

.st_box{

background: #eee;

height: 200px;

margin-bottom: 100px;

}

.st_modal{

display: none;

height: 100vh;

position: fixed;

bottom: 0;

right: 0;

left: 0;

top: 0;

width: 100%;

z-index: 999999;

}

.modal__bg{

background: rgba(0,0,0,0.8);

height: 100vh;

position: absolute;

width: 100%;

}

.modal__content{

background: #565656;

left: 50%;

padding: 40px;

position: absolute;

top: 50%;

transform: translate(-50%,-50%);

width: 80%;

overflow-y: scroll;

-webkit-overflow-scrolling: touch;

max-height: 80%;

color: #fff;

}

.modal__content a{

color: #fff;

font-size: 2em;

display: block;

position: absolute;

right: 20px;

top: 10px;

text-decoration: none;

}

@media screen and (min-width: 769px){

.modal__content{

background: #565656;

left: 50%;

padding: 40px;

position: absolute;

top: 50%;

transform: translate(-50%,-50%);

width: 60%;

overflow-y: scroll;

-webkit-overflow-scrolling: touch;

max-height: 80%;

color: #fff;

}

失敗例

「bt_st」のクラスが付いているボタンの「data-target」と、「st_modal」のクラスが付いている「div」の「id」が一致していないと動きません。
必ず一致させてください。
また、1ページ内で複数使用する場合は、「data-target」「id」の値は変更してください。

  <div class="bt_st"><a class="js-modal-open" href="" data-target="modal00">詳しく見る</a></div>
  <div id="modal_out" class="st_modal js-modal">
    <div class="modal__bg js-modal-close"></div>
    <div class="modal__content">
      <a class="js-modal-close" href="">×</a>
      <div class="row">
        <div class="col-sm-12">
			テキストや画像などを表示できます。
          </div>
        </div>
      </div><!--modal__inner-->
  </div><!--modal-->

<div class="bt_st"><a class="js-modal-open" href="" data-target="modal00">詳しく見る</a></div>

テキストや画像などを表示できます。

</div>

</div>

</div>

ボタンのデザイン

「bt_sd」に対応するクラスを追記してください。
ボタンのデザインを変える場合、「bt_sd」を直接編集せず、「bt_sd」に対応するクラスを追記して編集して、その中のaタグを変更するというように編集してください。

html

			<div class="bt_st mo_btst1"><a class="js-modal-open" href="" data-target="">詳しく見る</a></div>

1	<div class="bt_st mo_btst1"><a class="js-modal-open" href="" data-target="">詳しく見る</a></div>

css

.bt_st.mo_btst1 a{
	display: block;
	background-color: #000;
	color: #fff;
	padding: 1rem;
	transition: .3s;
}
.bt_st.mo_btst1 a:hover{
	text-decoration: none;
	background-color: #555;
}

.bt_st.mo_btst1 a{

display: block;

background-color: #000;

color: #fff;

padding: 1rem;

transition: .3s;

}

.bt_st.mo_btst1 a:hover{

text-decoration: none;

background-color: #555;

}

html

<div class="bt_st mo_btst2"><a class="js-modal-open" href="" data-target=""><i class="fas fa-plus"></i></a></div>

1	<div class="bt_st mo_btst2"><a class="js-modal-open" href="" data-target=""><i class="fas fa-plus"></i></a></div>

css

.bt_st.mo_btst2 a{
	display: block;
	background-color: #000;
	color: #fff;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-right: auto;
	margin-left: auto;
}
.bt_st.mo_btst2 a i{
	line-height: 50px;
	font-size: 1.4rem;
	transition: .3s;
}
.bt_st.mo_btst2 a:hover{
	text-decoration: none;
}
.bt_st.mo_btst2 a:hover i{
	transform: rotate(90deg);
}

.bt_st.mo_btst2 a{

display: block;

background-color: #000;

color: #fff;

width: 50px;

height: 50px;

border-radius: 50%;

margin-right: auto;

margin-left: auto;

}

.bt_st.mo_btst2 a i{

line-height: 50px;

font-size: 1.4rem;

transition: .3s;

}

.bt_st.mo_btst2 a:hover{

text-decoration: none;

}

.bt_st.mo_btst2 a:hover i{

transform: rotate(90deg);

}

振り分けページへ戻る

トップへ戻る

page モーダル（ポップアップ）

モーダル/ポップアップ

失敗例

ボタンのデザイン