ポップアップで作れないか試してみました。
結構いい感じです。CSSって本当に便利なんですね。(気が付くの遅いよね。絶対。)
それでは、サンプルです。
目標
CSSでクリックするとポップアップする入力画面を作る！
sample.html
<html> <head> <meta content="IE=edge" http-equiv="X-UA-Compatible" /> <link href="./samplecss.css" rel="stylesheet" type="text/css" /> <title>sample</title> </head> <body> <div class="container"> <header> ヘッダーだよ </header> <!-- メニュー部分ここから --> <main> meinだよ<br> 改行<br> 改行<br> 改行<br> 改行<br> 改行<br> <div id="ce"> <label> <input id="popup" type="checkbox"> <div class="box">編集！</div> <div class="pop"> <form action="./sample2.html" method="POST"> <label>入力１<input type="text"></label><br> <label>入力２<input type="text"></label><br> <label>入力３<input type="text"></label><br> <button type="submit">submit</button> </form> </div> <div class="mask"></div> </label> </div> </main> </div> </body> /html> |
samplecss.css
* { margin : 0; padding : 0; } html{ background-color: #FFAAAA; } .container{ max-width : 960px; margin : 0 auto; } header{ background-color: #AAFFFF; } div#ce{ position: relative; display: block; width: 100px; height: 100px; } main { display: block; padding: 5px; } /*ポップアップの設定*/ #popup{ display : none; } div.box{ display: table-cell; text-align: center; vertical-align: middle; position : relative; background-color: #55FF55; width: 100px; height: 50px; } /*表示させないとき*/ div.mask{ display: none; } div.pop{ display: none; } /*表示させるとき*/ #popup:checked + div.box + div.pop + div.mask{ display: block; margin: auto auto; position : fixed; top : 0; bottom : 0; left : 0; right : 0; background : rgba(0,0,0,0.5); z-index : 10; } #popup:checked + div.box + div.pop { display: block; margin: auto auto; position : fixed; top : 0; bottom : 0; left : 0; right : 0; z-index : 20; width: 300px; height: 300px; padding: 10px; background-color: #FF99FF; } |
表示例１：ポップアップが出ていないとき
表示例２：ポップアップが表示されているとき
ポイント!
-
HTML側
- チェックボックスをlabelタグで囲む。
- チェックボックスの隣にクリックさせたい部品を作る。
- その隣に実際にポップアップさせる画面を作る
- またその隣に何にも入れない要素をdivブロックを作っておく。
<label>
<input id="popup" type="checkbox">
<div class="box">[クリックさせたい部分の見出し]</div>
<div class="pop">
[ここはなんでもOK]
</div>
<div class="mask"></div>
</label> -
CSS側
- チェックボックスは非表示 display:noneを指定。
- ポップアップさせる前の要素はすべてdisplay:noneを指定。
- ポップアップさせたい要素の表示は
- [チェックボックスのid]:checkedの隣接要素にして設定する。
- ポップアップさせる要素にはz-indexを指定する。
前面に来るものの値を大きくする。
/*ポップアップの設定*/
#popup{
display : none;
}
div.box{
display: table-cell;
text-align: center;
vertical-align: middle;
position : relative;
background-color: #55FF55;
width: 100px;
height: 50px;
}
/*表示させないとき*/
div.mask{
display: none;
}
div.pop{
display: none;
}
/*表示させるとき*/
#popup:checked + div.box + div.pop + div.mask{
margin: auto auto;
position : fixed;
top : 0;
bottom : 0;
left : 0;
right : 0;
background : rgba(0,0,0,0.5);
z-index : 10;
}
#popup:checked + div.box + div.pop {
display: block;
margin: auto auto;
position : fixed;
top : 0;
bottom : 0;
left : 0;
right : 0;
z-index : 20;
width: 300px;
height: 300px;
padding: 10px;
background-color: #FF99FF;
}
一旦閉じても入力項目は維持されていたりと結構便利に使えそうです。
以上、ご参考まで。
実施は自己責任です。
0 件のコメント:
コメントを投稿