ポップアップウィンドウ(削除ボタン)

プログラミング

はじめに

前回表示に成功したポップアップウィンドウは、リロードしない限りその場に残ったままです。
これでは具合が悪いので、削除ボタンを実装したいと思います。

実行

前回までのコードは次の通りです。

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

おさらいすると、let htmlで宣言しているhtmlデータを、.popの下に追加することになります。
まずは、このhtmlデータに、削除ボタンのコードを追加することにします。

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

classが"pop__window__delete-btn js-delete-btn"という風に、
pop__window__delete-btn
js-delete-btn
の2つを指定している事に注意です。

CSSも次のように編集します。sample.scss

.pop{
  &__window{
    width: 500px;
    height: 500px;
    background-color: 500px;
    position: fixed; 
    top: 300px; 
    left: 300px;
    &__delete-btn{
      width:  50px;
      height: 50px;
      background-color: #FF0;
      color: #000;
      border: solid 1px #FFF;
      border-radius: 50%;
      margin: auto;
    }
  } 
}

こうすれば、表示されるポップアップウィンドウに、黄色い〇ボタンが追加されます。

次に、新しいJavaScriptの関数を追加します。sample.js

$(function(){
 (中略)
 $(function).on("click","js-delete-btn",function(){
   $(".pop__window").remove;
 })
});

ここで、DOM要素がjs-delete-btnになっている事に注意です
appendメソッドで追加したhtml要素でJavaScriptを発火させる場合は、このようにクラスを指定する必要があります

これで削除ボタンを押すと、表示されているポップアップウィンドウが消えるようになりました。
再び.btnを押すと、同じようにポップアップウィンドウが表示されます。

全体で下記のようなコードになります

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

コメント

  1. […] 前回の記事に加えて、ウインドウの最大化及び最大化したウインドウを元のサイズに戻すボタンを実装します。 […]

タイトルとURLをコピーしました