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

Githubにssh接続するとき、つまづくポイント
github Githubにアカウントを作る。そしてリポジトリも作った。あとはc ...

【これで解決】SPAでセッション管理するならCookieにしよう【CakePHP4編】
ここ最近の主流はSPA(シングルページアプリケーション) + APIサーバの構成 ...

Next.jsでbodyタグの属性切り替えはどうするの?
最近なにかとお触りしてるNext.js。Reactを扱いやすく、特にルーティング ...

【即解決】CakePHP4でAPIを実装してCORSが解消しないあなたへ【疑うべきはプリフライト】
プログラミング Webシステムを、フロントサイドとサーバーサイドを分けて構築した ...

【Laravel】OpenGraphでOGPをパースする
OGP PHPでOPGをパースしようと思った時の鉄板ツールは だとWebで噂され ...
ディスカッション
コメント一覧
まだ、コメントがありません