ES2015で簡単なポップアップを作成 #JavaScript

今回はJavaScriptで簡単なポップアップのテンプレートを作ってみたのでサンプルコードを載せておきます。

index.html

<!DOCTYPE html>
<html lang='ja'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>ポップアップのサンプル</title>
    <link rel='stylesheet' href='css/style.css'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
</head>
<body>
    <button class="popupButton" id="js-clickEl">クリックする要素</button>
    <div class='popup' id="js-popup">
        <div class='popup_content'>
            <p class='popup_content_closeButton' id="js-popupCloseButton">X</p>
            <div class='popup_content_description'>何か文言が入ります</div>
        <div>
    </div>
    <script src="js/Popup.js"></script>
</body>
</html>

style.css

.popupButton {
    border: none;
    background: #323232;
    color: #fff;
    padding: 20px;
    border-radius: 33px;
    cursor: pointer;
}
.popup {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(5,5,5,0.8);
    opacity: 0;
    transition:all .3s;
    transform: scale(0);
}

.popup.is-active {
    transform: scale(1);
    opacity: 1;
}

.popup_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 400px;
    height: 360px;
    padding: 30px;
}

.popup_content_closeButton {
    cursor: pointer;
    text-align: right;
}

.popup_content_description {
    margin-top: 30px;
}

Popup.js

class PopUp {
    constructor(clickEl, popupEl, closeEl){
        this.clickEl = document.getElementById(clickEl)
        this.popupEl = document.getElementById(popupEl)
        this.closeEl = document.getElementById(closeEl)
    }
    setEventListener(){
        this.clickEl.addEventListener("click", this.displayPopup.bind(this));
        this.closeEl.addEventListener("click", this.closePopup.bind(this));
    }
    displayPopup(){
    this.popupEl.classList.add("is-active")
    }
    closePopup(){
        this.popupEl.classList.remove("is-active")
    }
}
const simplePopup = new PopUp('js-clickEl', "js-popup", "js-popupCloseButton");
simplePopup.setEventListener();

このPopupクラスを使って初期化した後の引数に対象となる要素のIDを入れればデザインの違うポップアップにも対応できます！

是非使ってみてください！