はじめに

ご覧いただいた方は、Oracle APEXを用いて画面開発を行っており、開発に苦労されている方かと思います。

本記事では、以下の図のようにモーダル・ダイアログを用いた開発時に右上の「×」ボタンが邪魔と感じた方がいらっしゃるかと考え、対応方法について記述したいと思います。

※本記事は全て日本語表記で翻訳されている名称を用いています。

結論

そもそもモーダル・ダイアログとは、現在表示されている画面（親ページ）の上に、重ねて小さなウィンドウのような画面（ダイアログ）を表示する機能となります。
入力フォームや確認画面、詳細情報表示などでよく使われるものになりますので、もし機会があれば作成してみてください。

作成方法は、以下のようにページに対してページ・モードを「モーダル・ダイアログ」にしていただくだけとなります。

親ページと子ページ(モーダル・ダイアログ)それぞれに個別の設定を行う必要がございます。

親ページの上部のページ名称を選択(赤色の枠線)した状態で「CSS」-「インライン」(緑色の枠線)を表示します。

「インライン」の中に、以下の内容を記述してください。

記述例

.任意の名称 .ui-dialog-titlebar-close {
    display: none;
}

上記まで対応したら親ページは終了です。

先ほど親ページで作成したCSSにて「任意の名称」とした内容を子ページの上部のページ名称を選択(赤色の枠線)した状態で「ダイアログ」-「CSSクラス」(緑色の枠線)の中に記載します。

上記まで対応したら子ページは終了です。

それでは、設定した内容で実際に起動してみると以下のように「×」ボタンが表示されない状態となります。

なお、画面のように「終了」ボタンやモーダル・ダイアログを閉じる処理を仕込んでおく必要があるため、注意して開発を進めてください。

本記事では、OracleAPEXのモーダル・ダイアログの気になる右上の「×」ボタンの消し方について記述させていただきました。
本記事が、どなたかの役に立てたのであれば幸いです。
本記事をご覧頂き、ありがとうございました。