JavaScriptを利用して、ポップアップウインドウ機能をRuby on railsアプリに実装してみた

はじめに

JavaScript（jQueryで記述）を利用して、ネットサーフィンでよく見るポップアップウインドウ機能を実装してみました。

実行

ビューファイルは次のものを用意します（Ruby on railsで開発しているので、Hamlで書いています）。

.btn
  ボタン
.pop

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

ここではクラス名をそれぞれbtnとpopにしていますが、分かりやすければなんでもOKです。

次に、JavaScriptを書いていきます。
最初にbtnクラスのオブジェクトをclick（クリック）すると、コード内に書いてあるhtmlというコードが、popクラスのオブジェクトの下にappend（追加）されるコードを書きます。

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

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

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

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

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

これで、画面の中央当たりに、赤い四角が表示されるようになります。
‘positon: fixed;‘という部分で、元のビューを消さずに、浮いた状態で赤い四角を表示させることができます。ここがポップアップウインドウ機能の肝になります。
最後に、ボタンを押しても赤い四角が増え続けないように、既に表示されている赤い四角が削除されるようにします。

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

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