— rémi (@ok_remi_ok) August 20, 2018
コード自体はこちらにあるのですが
Retro Yes No Popup Dialog Box – CodeMyUI
https://codemyui.com/retro-yes-no-popup-dialog-box/
Bloggerに置くに当たって簡略化
</head> 上に追加
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.slideshow-container, #blog-wrapper {
display: none;
}
.modal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: auto;
display: inline-flex;
flex-direction: column;
align-items: center;
padding: 1.6rem 3rem;
border: 1px solid black;
border-radius: 5px;
background: white;
box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
}
</style>
</b:if>
*非表示にする要素はテーマ(テンプレート)によって異なると思いますので、変更して下さい
<body> 下に追加
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='modal'>
<p class='message'>あなたは18歳以上ですか</p>
<div class='options'>
<a href='/search'><button class='btn'>はい</button></a>
<button class='btn'>いいえ</button>
</div>
</div>
</b:if>
ボタンの装飾は元々のテンプレートで設定した(されていた)こともあるのですが、面倒なので今回は省きました
0 comments:
スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。
注: コメントを投稿できるのは、このブログのメンバーだけです。