【Vue.js】v-dialogのz-indexの指定方法
2020年12月20日
ダイアログ表示中、ツールバーの要素を押せなくしたい
2時間ほどハマったのでメモ。
<v-app-var id="toolbar">
#toolbar {
z-index: 999
}
となっている場合、そのままv-dialogでダイアログを表示するとtoolbarにあるボタンや検索窓が押せてしまう。
なぜならtoolbarの方がダイアログより前面に位置するから。
【解決策】
・toolbarより前にオーバーレイ(灰色の無効化空間)をもってくる
・toolbarより前にダイアログをもってくる
<v-app-var id="toolbar" style="z-index: 1000;">
とする。すると、
ダイアログである .v-dialog__content-activeのz-indexが1002
オーバーレイであるv-overlay-activeのz-indexが1001となり、
両者がtoolbarの前面にあることから、toolbarの要素は押せなくなる。
めでたしめでたし。
関連記事

【PHP】アップロードファイルは20個がデフォルト「大事なのは当たりの付け方」
キーワードとして『デフォルトのファイルアップロードは20まで』と覚えておこう。 ...

Laravel5.5 ログイン中にログイン画面のURLを叩くのって何なの
Laravel5 「ログイン中にログイン画面のURL叩いたらホーム画面に行った」 ...

【VSCode】phpcsをインストール
Mac環境のVSCodeでphpcsがうまく入らなかったのでメモ。 その前にph ...

暗号化と復号化にAWSのKey Management Service (KMS)を使ってみた
AWS KMS CakePHP 3.8で構築中のサービスで暗号化と復号化の必要が ...

久しぶりにAndroid Studioで実機インストールしたら「INSTALL_PARSE_FAILED_NO_CERTIFICATES」が出た話
AndroidStudio 5年ぶりにAndroidアプリを開発しようと、mac ...
ディスカッション
コメント一覧
まだ、コメントがありません