Is there a way to remove the 'X' in a popup window?

  • 2
  • Question
  • Updated 3 years ago
  • Answered
I am using the standard Popup from the action framework and I would like to remove the 'X' that is displayed in the upper right hand corner.   I have added my own Cancel button and the 'X' is confusing the users.  Any suggestions?


Photo of Jeffrey Lawler

Jeffrey Lawler

  • 1,454 Points 1k badge 2x thumb

Posted 3 years ago

  • 2
Photo of Thimo

Thimo

  • 1,280 Points 1k badge 2x thumb
Give the popup an ID or a class e.g. popup-without-close

and then add the following css:

.popup-without-close .ui-dialog .ui-dialog-titlebar .ui-button.ui-dialog-titlebar-close {
  display: none;
}
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
YES SIR!!! Barry Schnell is the man on this one!

He made a component that does this and way more.

https://community.skuidify.com/skuid/topics/popup-controller-component-disable-x-escape-key-and-hook-dialog-events
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
If you don't want to install Barry's awesome component, here's a CSS snippet that you can add to your page/master page/theme to hide that x from the popup:

.ui-button-icon-only .ui-icon {
    display: none;
}


This both hides the x and makes it unclickable (so you must create a Close button for users to exit the popup). I don't think this snippet will affect anything else, but I don't know for sure if anything else has this class (button icons and table action icons, at least, are still displayed).

Cheers!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,086 Points 10k badge 2x thumb
One thing to keep in mind is that "hiding" the 'X' won't disable the 'escape' key from closing the dialog.  If you want to ensure that the only way the user can 'close' the dialog is via your own button, you need to hide the 'x' and disable escape key.  The custom component provides both hooks.  If disabling the 'x' only is all you need, you can use the css trick but you'll want to make sure to be extremely explicit in your selector including adding your own css class to the dialog (to be sure you don't hide an 'x' on a dialog you don't want hidden) and the class ui-dialog-titlebar-close.  I haven't tested the solution from Thimo GBC but from looking at it, it should do the trick.