【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の要素は押せなくなる。
めでたしめでたし。
関連記事

Unable to emit headers. 見過ごすことも可能・・・だがしかし
php Unable to emit headers. PHP開発をやってるとW ...

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

phpMyAdminのIP制限を.htaccessファイルでかける
phpMyAdmin phpMyAdminをyumなどでインストールせずに から ...

【Docker超入門】秒でdockerを理解する
docker 道を歩けばドッカー、ドッカーと聞くようになりましたね。 僕はずっと ...

【初心者必見】プログラミングの概要を理解しよう
2020年の今年、新指導要領によって小学校でのプログラミングが必須化となります。 ...
ディスカッション
コメント一覧
まだ、コメントがありません