0

Currently I am working on a project that relies heavily on modal dialogs. I'm using durandal's dialog plugin. The problem I have is that within a modal, a user can click an element which displays its details in another modal.

What I would like to do is to close all open modals before I open a new modal. Can anyone give me a good idea of how I can ensure only a single dialog is open at any given time in durandaljs?

Phatjam98
  • 312
  • 2
  • 11
  • I'm confused. Aren't modals supposed to be closed by the user before they can do anything else? Isn't that what "modal" means? To put it another way, how are you getting two modal dialogs to open at the same time? Does that even make sense? – Robert Harvey Feb 06 '14 at 00:56
  • Yeah its kinda crazy. So what I have is episode details, and actor details. I have widgets for the episode and actor thumbnails which when clicked open the details in a modal. However the modal details contain other actors and other related episodes which are also displayed with the same widget. When those are clicked they open another modal on top of the previous modal. Does that make more sense? – Phatjam98 Feb 06 '14 at 01:03
  • It does, but I claim that your display widgets are not really modal. A modal dialog is what happens when you ask the user for input, and you suspend all programming activities (or at least other UI interaction) until the user completes filling out the dialog and clicking the OK button. – Robert Harvey Feb 06 '14 at 01:04
  • In this case, the user input is their selection of either an actor, an episode, a purchase etc. In the case of the user selecting another episode or actor the functionality is to open that items details in a modal. Thus creating the multiple modals issue I am facing. I need a way to target the previous dialog so I can close it as I open the new one. – Phatjam98 Feb 06 '14 at 01:11
  • I think we're going to need to see some pictures. I still don't see why you need to forcibly close a modal dialog. – Robert Harvey Feb 06 '14 at 01:15
  • I posted an answer below that might interest you. It's what we do. –  Apr 27 '14 at 01:51

2 Answers2

0

Ok so the issue I was facing was that I have various Modals, where one modal could be opened from within another modal. However I wanted the modals to close when another would open. The tricky part was that I am using widgets and click events to open the modals.

Since my project is an SPA it occurred to me to simply create a ko.observable - currentModal - on my global object and each new Modal closes the previous, then replaces the old with the new in currentModal(this);

I went even further and am now using the route objects to fire the Modals open as well. Durandal is fun.

Phatjam98
  • 312
  • 2
  • 11
0

Why not use Durandal's pub/sub, or a client-side message bus such as postal.js (which is what we use)? We close all modals by sending a close message over the channel 'app' and the topic 'app/modals'. Instead of holding a reference to an observable (which could have memory implications), we just hold a reference to the message channel (which is a string). Much cleaner way to go.