今日はとあるサイトのページにポップアップを追加する必要がありjqueryだとエラーがでてしまい困っていたのですが、cssだけでポップアップが実装できるのですね。はじめてしりました。
以下、備忘録も兼ねてメモ
・HTML
<label>
<span>popupを表示</span>
<input type=”checkbox” name=”checkbox”>
<div id=”popup”><img src=”https://assets.techacademy.jp/public/logo.png” alt=”TechAcademy” /></div>
</label>
・CSS
/*popup表示させたいコンテンツのレイアウトと位置*/
#popup{
width:30%;
line-height:100px;
background:#000;
padding:0 4%;
box-sizing:border-box;
display:none;
position:fixed;
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img{
width:100%;
}
label{
display:block;
}
/*ボタンの装飾*/
label span{
display:block;
background-color:#01b6ed;
color:#fff;
width:200px;
line-height:40px;
border-radius:4px;
text-align:center;
}
label span:hover{
cursor:pointer;
}
input[type=”checkbox”]{
display:none;
}
/*checkboxがcheckの状態になったらpopupを表示させる*/
input[type=”checkbox”]:checked + #popup{
display:block;
}
参考