<div class="other-32">
<div class="container">
<div class="section">
<div class="buttons"><button class="button is-primary" popovertarget="modal1">モーダル1</button><button class="button is-primary" popovertarget="modal2">モーダル2</button></div>
</div>
</div>
<div class="popover-content" id="modal1" popover>
<p>JavaScriptを使わずに最低限の機能が実現できます。</p>
</div>
<div class="popover-content" id="modal2" popover>
<p>2つめのポップオーバーを開くと、1つめは自動的に閉じます。</p>
</div>
</div>
.other-32
.container
.section
.buttons
button.button.is-primary(popovertarget="modal1") モーダル1
button.button.is-primary(popovertarget="modal2") モーダル2
<div class="popover-content" id="modal1" popover>
<p>JavaScriptを使わずに最低限の機能が実現できます。</p>
</div>
<div class="popover-content" id="modal2" popover>
<p>2つめのポップオーバーを開くと、1つめは自動的に閉じます。</p>
</div>
//- NOTE: pugを使うと「popover="popover"」として出力されてしまう。多分これが原因でモーダルの切替が上手くいかなかった
//- .popover-content(id="modal1", popover=true)
//- p JavaScriptを使わずに最低限の機能が実現できます。
//- .popover-content(id="modal2", popover=true)
//- p 2つめのポップオーバーを開くと、1つめは自動的に閉じます。
//- NOTE: bulmaのmodalとは合わせにくい気がした
//- //- モーダル1
//- .modal(id="modal1", popover)
//- .modal-background
//- .modal-content #{ text }
{
"text": "テキストが入ります。テキストが入ります。テキストが入ります。"
}
$BLOCK_NAME: '.other-32';
// 変数
#{ $BLOCK_NAME } {
.popover-content {
&:popover-open {
width: 300px;
height: 120px;
border-radius: 8px;
border: none;
padding: 24px;
box-shadow: 8px 8px 10px #c9c9c9;
background: #ffffff;
// normalizeでmargin消されていたので追記（chromeのユーザーエージェントスタイルにはデフォルトで設定）
margin: auto;
}
&::backdrop {
background-color: #505050;
opacity: 0.5;
}
}
// bulmaのmodalとは合わせにくい気がした
// .modal {
// width: 100%;
// height: 100%;
// margin: auto;
// &:popover-open {
// display: flex;
// }
// }
}