小窓を開ける方法がわかりません

Question

webアプリを製作中です。
画面遷移でなく、小さな窓を開いて窓内の文字や画像をクリックして
別の画面にリンクする方法を探しています。

具体的にはGメールのアプリボタンやアカウントボタンをクリックして
小さな窓を開く手法です。
このteratailでも右上のアカウントボタンをクリックすると小さな
窓が開き、アカウントにかかわる画面に遷移できるようになっています。

この小さな窓が開く方法は何というのでしょうか？
ハンバーガーメニューとも違うようです。
名称と作成方法についてご存じの方がいたら教えてください。

よろしくお願いいたします。

Gメールのアプリボタンをクリック

Gメールのアカウントボタンをクリック

teratailでも右上のアカウントボタンをクリック

Answer 1

ポップアップメニューですかね
モーダルのように全体を覆わないので

作り方はわりと簡単で ボタンをクリックしたら
JavaScript で 表示させたい要素のdiplay を show,none に切り替えてるだけです。
最初はポップアップ要素を none にしていると思うので、classList.toggle で show を指定するだけです。

アニメーションを加えたいならCSS
但し、display だけだと transition が効かないので、opacity も付け加える必要があります。

ウィンドウのどこを押してもポップアップメニューが消えるようにしたいなら、
window.onclick = event => {} でさらに書き足してあげる必要があります。

Material系のCSSフレームワークを使えば、そこそこのデザインでポップアップメニューなどwebページに必要な機能が最初からあったりしますけど。

Comments

[shaketonori]

コメントが遅くなって申し訳ありません。
この4･5日 javascript，jQuery で格闘していました。

「ポップアップメニュー」とのご指摘、ありがとうございました。
ポップアップウィンドウについても調べてみました。

初期設定で　style.display ="none"　としておくと非表示になり、
何かのイベントで　style.display ="block"　とすると表示されることが
わかりました。

「ウィンドウのどこを押してもポップアップメニューが消えるように」するのには
ちょっと苦労をしました。

単純に
$(document).on('click', function(e) {

とやってしまうと「開く」ボタンも拾ってしまい、なかなかうまくできませんでしたが、

$(document).on('click', function(e) {
if(!$(e.target).is('#btnDialogOpen')) {

とすると、例外箇所を除いてくれることがわかりました。

モーダルダイアログもポップアップメニューもCSSでコントロールすれば、任意の位置や
大きさで表示できそうです。

調べた範囲ではモーダルダイアログでもポップアップメニューでも
（正確に両者の違いが判らないのですが・・）実現できそうだということがわかりました。

pinokoさんの方がちょっと細かく書いてくれましたので、ベストアンサーとさせて頂きます。

ありがとうございました。

Answer 2

「モーダルダイアログ」の類いだと思います。

Comments

[shaketonori]

コメントが遅くなって申し訳ありません。
この4･5日 javascript，jQuery で格闘していました。

「モーダルダイアログ」であろうとのご指摘、ありがとうございました。

以下のような感じでモーダルダイアログを定義して、

hogeDialog = $( "#abcde" ).dialog({
autoOpen: false,
width: 500,
height: 300,
modal: true,

close: function() {
hogeDialog( "close" );
}
});

以下のような感じでモーダルダイアログを開くことができました

function doActionDialogOpen(){
gModalDialog.dialog( "open" );
}

jQuery UI や jQuery UI Theme を使うと見栄えのいい画面を作ることができる
こともわかりました。

ありがとうございました。

[m.ts10806]

JavaScriptはあくまでイベントや動きなので実際はjQuery UI付属のCSSが見た目部分の仕事をしています。