How to Disable the "Close" Button on a Modal Dialogue

As a programmer, you will sometimes want to force the user to take action from within a pop-up modal dialogue box. You can disable the "Close" button so the user is required to fill out a specific form before proceeding to the rest of the site. Normally, removing or not providing a close option on a modal dialogue box is considered bad practice, so use this method sparingly.

Instructions

1. Browse through the source files for the modal dialogue you are using. Many kinds of modal dialogue scripts are available, including Lightbox, ModalBox, FancyBox and the jQuery Lightbox plugin.

2. Open the main CSS file in a text editor so you can view and edit the source code.

3. Search the CSS file for the keyword "close." To search, press the "Ctrl" and "F" keys simultaneously, then type the word "close" in the Find What field and press the "Enter" key. There should be only one or two CSS elements defined for the script's close function.

4. Find the display: block property under the close element. Change the code to read display: none instead. This hides and disables the option for the user to close the modal dialogue box.

5. Save the file with the same name, then upload it to your hosting server and test out the change you made.

References

• Webdesign Tuts+: Modal and Modeless Boxes in Web Design
• GitHub: ModalBox
• 1st Web Designer: 30 Awesome Ajax Lightbox and Modal Dialog Solutions
• W3Schools: CSS Display Property