0

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

  • Could you please provide a screenshot/mockup to get an idea how it currently looks like? Please also provide an idea by yourself, then it'll be easier to evaluate your problem. – msp Jul 18 '14 at 8:06
  • If you upload a screenshot somewhere and link to it we can embed it into your question for you. – JonW Jul 18 '14 at 8:18
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.

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.