How to Close a ShowModalDialog

Written by cathlene s. baptista
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Close a ShowModalDialog
A modal dialogue window remains in focus until it is explicity closed. (man thinking about Internet security image by patrimonio designs from Fotolia.com)

The window.showModalDialog() JScript method loads a URL in a modal dialogue window. A modal dialogue displayed with this method is a window object that, once activated, remains atop all other browser windows until you explicitly close it. While the modal window is open, you may not interact with any other windows or switch between windows. A dialogue box window opened with the showModalDialog() method is a specific type of window and can be closed using the same methods that are used to close non-modal (modeless) windows.

Skill level:
Easy

Other People Are Reading

Things you need

  • JScript-enabled Web browser, e.g., Internet Explorer or a browser that supports showModalDialog()
  • Text editor

Show MoreHide

Instructions

  1. 1

    Use a text editor to create a new text file named modal.html. Type some HTML in the file that displays an input field. Label the input field "Name", add a line break using a tag, and save the file.

    <html>

    <body>

    Name: <input type="text"><br >

    </body>

    </html>

  2. 2

    Use a text editor to create a second text file named inner_page.html. Add an HTML button to the file that uses an onclick() event and the window.close() method to close the modal window. Label the button "Close This Window". Save and close inner_page.html.

    <html>

    <head>

    </head>

    <body>

    <button onclick=window.close();>Close This Window</button>

    </body>

    </html>

  3. 3

    Reopen modal.html. Add a JavaScript function to the <head> section of the HTML code named show Modal(). Add a showModalDialog() method to the show Modal() function. The showModalDialog() method takes three arguments: the page to display in the modal window, optional arguments that may be passed to the modal window, and optional physical characteristics of the modal window. Add these arguments and save modal.html.

    <html>

    <head>

    <script language="JavaScript">

    function show Modal() {

    window.showModalDialog("inner_page.html", "", "dialogWidth:200px; dialogHeight:200px;") ;

    }

    </script>

    </head>

    <body>

    Name: <input type="text">

    </body>

    </html>

  4. 4

    Continue editing modal.html, and add an HTML button below the "Name:" input field that uses the onclick() event to call the show Modal() function. Label the button "Submit", and save and close modal.html.

    <html>

    <head>

    <script language="JavaScript">

    function show Modal() {

    window.showModalDialog("inner_page.html", "", "dialogWidth:200px; dialogHeight:200px;") ;

    }

    </script>

    </head>

    <body>

    Name: <input type="text"><br >

    <button on Click="show Modal();">Submit</button>

    </body>

    </html>

  5. 5

    Open modal.html in a Web browser that supports the showModalDialog() method. Do not fill out the "Name:" field, and click the "Submit" button. The modal dialogue box will open. Move the dialogue out of the way, and attempt to fill out the "Name:" field displayed in modal.html. Because the modal dialogue is open, modal.html cannot take focus and cannot be edited. Click on the "Close This Window" button to close the modal window.

Tips and warnings

  • Functions that close non-modal (modeless) dialogs can also close modal dialogs, including self.close(), by clicking the browser close button (x).
  • Not all browsers support showModalDialog(), although it is supported in most newer browsers. See the Resources section for information on how to display a modal dialogue in browsers that don't support showModalDialog().
  • Modal dialogs opened with showModalDialog() have access to the dialogArguments property. Use this property to pass information to the modal dialogue.
  • Modal forms may confuse users if they are not implemented and messaged well.
  • Windows opened with showModalDialog() may have problems when posting back.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.