ポップアップを閉じたり開いたりする方法

Question

メルマガ登録のフォームを、画面の右下に表示させたいです。
さらに、その表示をユーザーが任意に閉じたり開いたりできるものにしたいです。
（以下イメージ図）
![

このようなデザインの名前がわからず、調べることができません。
ポップアップで検索すると、モーダルウィンドウが出てきました。

参考になりそうなURLをご存じの方がいらっしゃればご教示いただけないでしょうか。

開発環境はwindows10、VSCode使用です。

Answer 1

CSSやJqueryを使って要素の表示・非表示を切り替えたりする処理で実装できます。
メニュー表示などでよく使われるので、先述されているように「ドロップダウン」や「スライドメニュー」で調べたりすると右から左から上から下から現れる手法がたくさん出ているので参考にしてみてください。

考え方の一例としては下記div#box内にメルマガ登録フォームがあったとして

<div id="box">
   <input type="button" id="btn-grad" value="ボタンをクリック"/>
  <p>メルマガ登録フォーム</p>
</div>

#box{
	position: fixed;
	bottom:-250px;
	left:78%;
	height:300px;
	width:20%; 
}
コード

のようにbottomの位置をマイナスの高さにして画面上から見えないようにします。
この場合boxの高さが300pxなのに対し、bottomが-250pxなので50pxだけ見えるようにしていますが見えている部分に表示・非表示のボタンを配置しているためです。

このbottomの値をjqueryで切り替えてアニメーションしてみると下からヒョコっと現れる動作が可能になります。
（bottomが-300pxなら全部見えなくなるし-0pxなら全部見える）

  $('#btn-grad').toggle(
		function(){
			$('#box').animate({
				bottom: "-0px"
			},300);
		},
		function(){
			$('#box').animate({
				bottom: "-250px"
			},300);
		}
	);

実際の動きは下からひょっこり出てくる- jqueryにて確認してみてください。
コードの詳細も見られます。

jqueryでもslideUp・slideDownを使ってエフェクトをつけるやり方もいいのではないかなと思います。
CSSも含めて何通りかあると思うので思うような動きになるよう研究してみて下さいね。

Answer 2

ドロップダウンメニューの応用みたいなもんだと思うので、その辺りから試されてはどうでしょう。