Alternative website's UI/workflow design to avoid ShowModalDialog()

Question

As per chrome update, google is going to remove ShowModalDialog() from its browser feature list.

My doubt here is to know some alternative workflow/UI design in website to avoid the Modal dialog boxes.

I have a large website built using javascript/html/asp.net mvc and the ui is such that to fill lookup values (units, conversion rate etc) modal dialog boxes are displayed for user to search and select information.

So how I can redesign the UI/flow in such scenarios and provide good alternate approach to user? Links to websites avoiding popups are also welcomed.

Question similar to this have already been asked on stackoverflow, but they have not been answered. Few such questions, I found are:-

Question 1, Question 2, Question 3

Edits : It is not possible for me to provide screenshots but here is some description

• The UI contains menu bar via which user can update entity/object type to update
• The UI then display a grid.
• User can click add new button to add new elements to grid elements list.
• In the top section of this screen a DIV appears so that user can enter information
• Then a couple of text field we have ellipses button.
• User click on these and a modal popup opens. This popup acquires about 1/3 spaces in center of screen.
• Here user search and select information and click OK and textbox gets filled with selected information.

As for thing I have in my mind is to * gracefully slide up another screen from left, search & select information and select OK. After this the slide up screen would go back and textbox will get filled up

Answer 1

Google does not support ShowModalDialog anymore, but it does not mean that you can't use modal popup anymore. Many javascript libraries/frameworks will provide you with modal popup.

Bootstrap for example provide a modal popup example here: http://getbootstrap.com/javascript/#modals

Modal popup can still be part of a good UX, the pattern of modal popup is not deprecated. Good luck for finding an elegant way of implementing this.

Answer 2

If you open Chrome's console and run showModalDialog() in it, it gives you this error:

Chromium is considering deprecating showModalDialog. Please use window.open
and postMessage instead.

That makes it pretty obvious what the way to implement an exact replacement should be: use window.open(url) to open a popup window. postMessage is part of a Chromium extension: the Messaging extension. So using that may not be your best choice as it's not going to be cross-browser compatible. However, window.open() will still produce the popup window that showModalDialog() does. But you should be aware that most browsers block popups, especially JS popups.

If you're only looking for modal dialogs, and don't need to display external documents in them, you could look at alertify.js or Bootstrap's modals as a framework to help you. Of course, you could also use the standard window.alert().

Hope this helps.