I’m using the Modal component in RapidWeaver Elements and I’d like it to only close when the Modal Close component is clicked. Right now, the modal also closes if a user clicks outside on the backdrop or presses the Escape key.
I also attempted CSS and JavaScript overrides, but the default modal script still seems to
forces the close behavior.
Question:
Is there a supported way in Elements to disable backdrop and keyboard closing (so the modal only closes via the Modal Close component)? If not, could this be added as an option in the Modal inspector?
Which part annoys you, having to press the close button? In my 30+ years as a programmer (Although new to PHP and Limited web experience) a ShowModal stops all activity till the close button is clicked. I have a video play in the Modal and if while adjusting volume, I click on the modal or outside it closes. See St Patrick's High School Reunion Site - Multi-class reunion 2016 for an example. Just click on one of the faces at the bottom of the page.
I sure hope RM DOES NOT change this behavior, as I depend on it for all of my modals. If it is changed, there should be a toggle so we can still get the current behavior. I also find it annoying when I can’t click outside a modal to dismiss it.
It’s generally not a good idea to force a modal to only close with the Close component. The reason is accessibility and usability. Most users expect to be able to hit Escape or click the backdrop to dismiss a dialog. Taking that away can feel frustrating, especially on mobile where reaching for a small “X” or button might not be as quick.
From an accessibility point of view, keyboard users and screen reader users rely on predictable behaviour. Escape-to-close is a standard convention, and removing it makes the interface harder to use.
There are cases where you want to keep people in a flow (e.g. confirming a destructive action), but in those situations it’s often better to rethink the UI pattern instead of disabling standard modal behaviour. A dedicated confirmation dialog or a stepper flow tends to work better.
So while technically possible, we wouldn’t recommend changing the modal to lock users in. It goes against best practices for accessibility and user experience.
I do not disagree, as I do not have enough experience with web and IOS, but my 30+ years of Windows Desktop development is different. In that environment, you show form, or show form modal, is which case there is only the confirmed closure by button. A modal form is usually for a yes or no type response, or kind of confirmation response.
By definition:
A modal form is a type of user interface window that appears on top of the main application window, requiring the user to interact with the form before they can return to the background window or application. This focused interaction is used for tasks like collecting user information (e.g., for logins or sign-ups), asking for a decision (like confirming an action), or displaying important details, ensuring the user’s full attention on the task at hand
Right now I have a button that shows a modal with a video that auto starts. If you click outside the modal, the form closes, but the video continues. The user is caught trying to figure out where the sound is coming from, and how to stop it. That does not seem logical.
I just realize that even if I close the modal by the close button the video continues to play. Since you all say that clicking off the page or hitting escape is normal, I am now wondering whether I should even put a modal close component on the form. I kind of like the way it works now.