Hiding O4WDialog Close Button

The OpenInsight O4W framework function (version 1.5 as of this post) O4WDialog function is used to generate and display dialog boxes as shown below.

O4W Dialog with close button visible

The dialog has a default system X close button in the top right corner that presents a challenge for the developer when handling user interaction with the web page. The default close button doesn't generate any events when clicked, it immediately closes the dialog. This behavior could allow the user to bypass important parts of the screen if the program depends on receiving a dialog close event.

A simple way to resolve this behavior across the entire application is to add this code to your site's CSS file:

.ui-dialog-titlebar-close {
  visibility: hidden;

The CSS code hides the JQuery UI close button and prevents the user from bypassing the dialog close event by forcing the user to close a primary dialog buttons. The result is a dialog that looks like this:

O4W Dialog with hidden close button

The code also applies to O4WError messages but it's a moot point because O4WError dialog messages don't generate any events regardless of what button was clicked.

Share this post

Leave a comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

About Us

Congruity Service is a technology solutions company bringing the best technology solutions to OpenInsight projects, Drupal sites, servers, networks, and your technology needs.