ポップアップウィンドウ（最大化・元に戻す）

19180 ワード
JavaScript ポップアップ scss Rails jQuery JavaScript テキストリンク

はじめに

以前の記事に加えて、
ウインドウの最大化及び最大化したウインドウを元のサイズに戻すボタンを実装します。
別ブログにて、書き直したものを公開中です。
https://airesaies.com/2020/09/07/program009/

実行

前回まで書いた、下記のコードに変更を加えていきます。

sample.js
$(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;
 })
});
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: #F00;
      color: #000;
      border: solid 1px #FFF;
      border-radius: 50%;
      margin: auto;
    }
  } 
}

まず、ウインドウが画面中央にくるように修正します。

sample.scss
.pop{
  &__window{
    width: 50%;
    height: 50%; 
    top: 20%; 
    left: 20%;
  (他は省略）
  } 
}

JavaScriptで追加するhtmlデータに、最大化・元に戻すボタンのオブジェクトを追加します。

sample.js
$(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 class = "pop__window__expansion-btn js-expansion-btn"></div>
       <div class = "pop__window__mini-btn js-dmini-btn"></div>
     </div>
   `
   $(".pop").append(html);
 })
 $(function).on("click","js-delete-btn",function(){
   $(".pop__window").remove;
 })
});

このボタンのCSSも書き加えます。

sample.scss
.pop{
  &__window{
    （省略）
    &__expansion-btn{
      width:  50px;
      height: 50px;
      background-color: #9F9;
      color: #000;
      border: solid 1px #FFF;
      border-radius: 50%;
      margin: auto;
    }
    &__mini-btn{
      width:  50px;
      height: 50px;
      background-color: #FF0;
      color: #000;
      border: solid 1px #FFF;
      border-radius: 50%;
      margin: auto;
    }
  } 
}

ボタンをクリックした時に、ウインドウのサイズが変わるようにします。
処理としては、それぞれのボタンをclickした時に、cssメソッドで.pop__windowのサイズ・位置を変更します。

sample.js
$(function(){ 
 （省略）
 $(document).on("click",".js-expansion-btn",function(){ 
   $(".show__window").css({'height':'100%','bottom':'0','width':'100%','right':'0'}); 
  }); 
  $(document).on("click",".js-mini-btn",function(){ 
    $(".show__window").css({'height':'60%','bottom':'20%','width':'60%','right':'20%'}); 
  });  
});

これで、最大化・元に戻すボタンの実装は完了です。
最後に、JavaScriptのコードをすべてを書きますします。

sample.js
$(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 class = "pop__window__expansion-btn js-expansion-btn"></div>
       <div class = "pop__window__mini-btn js-dmini-btn"></div>
     </div>
   `
   $(".pop").append(html);
 })
 $(function).on("click","js-delete-btn",function(){
   $(".pop__window").remove;
 });
 $(document).on("click",".js-expansion-btn",function(){ 
   $(".show__window").css({'height':'100%','bottom':'0','width':'100%','right':'0'}); 
 }); 
 $(document).on("click",".js-mini-btn",function(){ 
   $(".show__window").css({'height':'60%','bottom':'20%','width':'60%','right':'20%'}); 
 }); 
});
Ubuntuでのインストール構成とMavenのアンインストール
Sdust ACM Weekly #5