ポップアップウィンドウ（表示）

はじめに

JavaScript（jQueryで記述）を使って、ボタンをクリックするとポップアップウィンドウが表示されるようにします。
別ブログにて、書き直したものを公開中です。
https://airesaies.com/2020/09/05/program007/

実行

hamlは次のものを用意します。

sample.haml.html

.btn
  ボタン
.pop

.btnをクリックすると.popにオブジェクトが作成されるようにします。

sample.js

$(function(){
 $(".btn").on("click" function(){
    let html = `
     <div class = "pop__window"></div>
   `
   $(".pop").append(html);
 })
});

このままだと何も表示されないので、CSSを指定します。

sample.scss

.pop{
  &__window{
    width: 500px;
    height: 500px;
    background-color: 500px;
  } 
}

こうすれば、.btnを押すと.popの部分に赤い四角が作成されます。
ポップアップウィンドウっぽくするために、

sample.scss

.pop{
  &__window{
    width: 500px;
    height: 500px;
    background-color: 500px;
    position: fixed; 
    top: 300px; 
    left: 300px;
    //値は任意
  } 
}

これで、画面の中央当たりに、赤い四角が表示されるようになります。
最後に、ボタンを押しても赤い四角が増え続けないように、既に表示されている赤い四角が削除されるようにします。

sample.js

$(function(){
 $(".btn").on("click" function(){
    $(".pop__window").remove();
    let html = `
     <div class = "pop__window"></div>
   `
   $(".pop").append(html);
 })
});

これで最低限の処理はできました。
次回以降は、これを応用したプログラムを作りたいと思います。