HTMLとCSSでポップアップを表示する

HTMLとCSSでポップアップを表示する

HTMLとCSSでポップアップを表示する作り方を説明します。

ウェブサイトでのポップアップはボタンをクリックしたときに、最初は隠れていたコンテンツがボタンに連動して表示される動作のことです。

ポップアップウィンドウと言うほうが用語としては正しいのかもしれません。

そんなポップアップはHTMLとCSSだけで作ることができます。

 

ポップアップのHTML

 

CSSでポップアップを表示するために使用するHTMLの構造が以下の記述です。

 

<div class="popup-wrapper">
    <input id="open" type="checkbox">
    <label for="open" class="open-btn">OPEN</label>
    <label for="open" class="overlay"></label>

    <div class="popup-content">
        <label for="open" class="close-btn"><i class="far fa-times-circle"></i></label>
    </div>
</div>

 

HTMLのinputタグとlabel要素をマークアップしているくらいなのですが、それぞれのlablelがポップアップを表示するときの開閉ボタンとマスクの役割をするHTMLです。

ポップアップして表示するコンテンツは<div class=”popup-content”></div>の中に入ることになります。

 

 

ポップアップ表示するHTMLをブラウザで表示すると、チェックボックスとOPENというテキストが表示されたラベル、そしてバツマークのアイコンが表示します。

バツマークのアイコンについてはFont Awesomeを読み込んで表示しています。

ポップアップのHTMLの構造でポイントになるのが、ポップアップを開閉する仕組み作りです。

 

ポップアップが開閉するHTMLの作り方

 

ポップアップが開閉するHTMLの作り方に必要なのがinputタグとlabel要素です。

 

<div class="popup-wrapper">
    <input id="open" type="checkbox">
    <label for="open" class="open-btn">OPEN</label>
    <label for="open" class="overlay"></label>

    <div class="popup-content">
        <label for="open" class="close-btn"><i class="far fa-times-circle"></i></label>
    </div>
</div>

 

inputタグには以下2つの属性を記述します。

 

  • id属性を記述してid名を指定
  • type属性にcheckboxを指定

 

次にHTMLのlabel要素を3つマークアップします。

 

  • inputタグのすぐ下に2つlabelをマークアップ
  • <div class=”popup-content”></div>の内部に1つのlabelをマークアップ

 

マークアップした3つのlabelにはfor属性を記述します。

for属性の値はinputのidに指定した値と同じ値名を指定します。例えばinputのidにopenと指定しているならlabelのforにはopenを指定します。

そしてlabel要素へのクラス付けをしておきます。

 

  • inputタグ直下のlabelにclass=”open-btn”
  • inputタグから2つ目のlabelにclass=”overlay”
  • <div class=”popup-content”></div>内部のlabelにclass=”close-btn”

 

Advertisement

 

記述後にポップアップが開閉するHTMLを記述したHTMLファイルをブラウザで表示させて、label要素をクリックするごとに、チェックボックスのチェックが入ったり外れたりすればポップアップが開閉するHTMLの作り方が成功しています。

 

ポップアップのCSS

 

ポップアップを表示するために使用するCSSは以下の記述です。

 

.popup-content{
    visibility: hidden;
    opacity : 0;
}

#open:checked ~ .popup-content{
    visibility: visible;
    opacity : 1;
    transition: .3s;
}
#open:checked ~ .overlay {
    background: rgb(51, 51, 51,.8);
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    transition: .3s;
    z-index: 9999;
}

.open-btn {
    display: block;
    width: 320px;
    margin: 48px auto;
    text-align: center;
    background-color: #383c3c;
    color: aliceblue;
    padding: 20px 24px;
    border: 3px solid #00bcd4;
}

label.close-btn {
    position: absolute;
    top: -15px;
    right: -14px;
    background: #383c3c;
    color: aliceblue;
    width: 26px;
    height: 26px;
    text-align: center;
    border-radius: 50px;
    line-height: 1.6;
}

.fa-times-circle {
    position: relative;
    top: -2px;
    left: -2px;
    font-size: 1.9em;
    color: #00bcd4;
}

.popup-content{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
    height: auto;
    background-color: aliceblue;
    border: 5px solid #00bcd4;
    z-index: 9999;
    transition: .1s;
    padding: 12%;
}

@media (orientation: landscape){
    .popup-content{
        width: 55%;
    }
}

input#open{display: none;}

 

 

ポップアップ表示するCSSをcssファイルに記述してページのheadでスタイルを読み込みHTMLファイルをブラウザで表示するとOPENボタンが表示されます。

ボタンをクリックするとコンテンツを表示する要素がポップアップで表示します。

ポップアップのCSSでポイントになるのが、ポップアップの表示と非表示をボタンで切り替える動作の作り方です。

 

CSSでポップアップの表示と非表示を切り替える

 

CSSでポップアップの表示と非表示を切り替える動作は、CSSの「:checked」と「visibility」そして「opacity」を使用して作成します。

以下のCSSがポップアップの表示と非表示を切り替える部分の記述です。

 

.popup-content{
    visibility: hidden;
    opacity : 0;
}

#open:checked ~ .popup-content{
    visibility: visible;
    opacity : 1;
    transition: .3s;
}

#open:checked ~ .overlay {
    background: rgb(51, 51, 51,.8);
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    transition: .3s;
    z-index: 9999;
}

 

<div class=”popup-content”></div>

上記div要素を最初は非表示にしておくために、popup-contentクラスをCSSでセレクタにしてvisibility: hidden;とopacity : 0;を指定します。

popup-contentクラスが付いてるdiv要素はポップアップして表示するコンテンツの親要素です。

display:noneで非表示にするとtransitionが効かなくなるのでvisibility: hiddenで要素を非表示にします。

 

非表示にしたdiv要素はボタンをクリックしたら表示できるようにopen:checked ~ .popup-content{}セレクタを作成してCSSを適用します。

open:checked ~ .popup-contentセレクタ内にはvisibility: visible;を記述します。あとopacity : 1;も記述しておきます。

これにより最初はvisibility: hiddenで非表示にしていたポップアップ表示する要素はボタンをクリックすることでvisibility: visibleに適用が切り替わり表示できるようになります。

 

Advertisement

 

続いてopen:checked ~ .overlayの記述部分です。

open:checked ~ .overlayはポップアップ表示するボタンをクリックしたときにポップアップ画面以外の部分を覆うように背景を表示するCSSです。

ボタンをクリックしたタイミングで背景色を表示するために、open:checked ~ .overlayというセレクタを作成してポジションを固定し背景を指定します。

 

ここまでの時点でポップアップする要素を表示した場合、ボタンをクリックすると背景色が反映するだけですが、CSSでポップアップの表示と非表示を切り替えるのは成功しています。

 

ポップアップをCSSで中央に表示する

 

ポップアップで表示するコンテツは、HTMLで見た場合popup-contentクラスを付けたdiv要素です。

CSSでpopup-contentクラスをセレクタにしてポジションを固定し位置を調整してポップアップを画面の中央に表示します。

.popup-contentセレクタに記述するCSSは以下の部分です。

 

.popup-content{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
    height: auto;
    background-color: aliceblue;
    border: 5px solid #00bcd4;
    z-index: 9999;
    transition: .1s;
padding: 12%;
}

@media (orientation: landscape){
    .popup-content{
        width: 55%;
    }
}
  • positionをfixedで固定し、位置をtopとleft50%で指定
  • transform: translate(-50%, -50%)で画面中央に配置

 

上記2つ以外のプロパティはポップアップ内のコンテンツの幅や高さボーダー、要素の重ね合わせ順序(z-index)の指定です。

高さについてはpaddingで出してテストしているのでコンテンツを入れるときには不要になります。

 

 

これでボタンをクリックするとポップアップをCSSで中央に表示することができているかと思います。

 

CSSでポップアップのボタンをデザイン

 

最後にCSSでポップアップのボタンをデザインして全て完成です。

 

  • ポップアップを開くボタン
  • ポップアップを閉じるボタン

 

上記2つのボタンをデザインです。

 

.open-btn {
    display: block;
    width: 320px;
    margin: 48px auto;
    text-align: center;
    background-color: #383c3c;
    color: aliceblue;
    padding: 20px 24px;
    border: 3px solid #00bcd4;
}

.close-btn {
    position: absolute;
    top: -15px;
    right: -14px;
    background: #383c3c;
    color: aliceblue;
    width: 26px;
    height: 26px;
    text-align: center;
    border-radius: 50px;
    line-height: 1.6;
}

.fa-times-circle {
    position: relative;
    top: -2px;
    left: -2px;
    font-size: 1.9em;
    color: #00bcd4;
}

input#open{display: none;}

 

.open-btnセレクタに記述しているCSSがポップアップを開くときのボタンをデザインしています。

ボタンの背景と色、ボーダーを付けてボタンをセンター配置しているくらいですので、必要ならば好きなボタンデザインに修正して位置を調整してください。

 

.close-btnセレクタに記述しているCSSはポップアップを閉じるボタンをデザインしています。

.close-btnにposition: absoluteを指定してポップアップ画面の右上に位置を調整、背景色を適用した上にFont Awesomeのアイコンから丸枠付きのバツマークを使用して重ねデザインをしています。

 

 

細かいデザインですけど閉じるボタンをズームしてもウットリするほどキレイに表示できます。

HTMLとCSSでポップアップを表示するまでを説明した今回の投稿は以上です。何か参考になる部分があったら役立ててください。

CSSカテゴリの最新記事