はじめに
ご覧いただいた方は、Oracle APEXを用いて画面開発を行っており、開発に苦労されている方かと思います。
本記事では、以下の図のようにモーダル・ダイアログを用いた開発時に右上の「×」ボタンが邪魔と感じた方がいらっしゃるかと考え、対応方法について記述したいと思います。
※本記事は全て日本語表記で翻訳されている名称を用いています。
結論
- OracleAPEX上にてCSSの設定を行うことで、該当の「×」ボタンを消すことが可能となります。
モーダル・ダイアログについて
そもそもモーダル・ダイアログとは、現在表示されている画面（親ページ）の上に、重ねて小さなウィンドウのような画面（ダイアログ）を表示する機能となります。
入力フォームや確認画面、詳細情報表示などでよく使われるものになりますので、もし機会があれば作成してみてください。
作成方法は、以下のようにページに対してページ・モードを「モーダル・ダイアログ」にしていただくだけとなります。
右上「×」ボタンの消し方について
親ページと子ページ(モーダル・ダイアログ)それぞれに個別の設定を行う必要がございます。
親ページでの対応
親ページの上部のページ名称を選択(赤色の枠線)した状態で「CSS」-「インライン」(緑色の枠線)を表示します。
「インライン」の中に、以下の内容を記述してください。
.任意の名称 .ui-dialog-titlebar-close {
display: none;
}
上記まで対応したら親ページは終了です。
子ページでの対応
先ほど親ページで作成したCSSにて「任意の名称」とした内容を子ページの上部のページ名称を選択(赤色の枠線)した状態で「ダイアログ」-「CSSクラス」(緑色の枠線)の中に記載します。
上記まで対応したら子ページは終了です。
設定後の画面
それでは、設定した内容で実際に起動してみると以下のように「×」ボタンが表示されない状態となります。
なお、画面のように「終了」ボタンやモーダル・ダイアログを閉じる処理を仕込んでおく必要があるため、注意して開発を進めてください。
おわりに
本記事では、OracleAPEXのモーダル・ダイアログの気になる右上の「×」ボタンの消し方について記述させていただきました。
本記事が、どなたかの役に立てたのであれば幸いです。
本記事をご覧頂き、ありがとうございました。