DHTML Modal dialogs

18 Feb 2005 - 4:37am
9 years ago
10 replies
1451 reads
subimage interactive
2004

There's been a fair amount of discussion on the list lately about
DHTML technology and how it pertains to interface design.

I just wrote up a small article on how to implement cross-browser
DHTML modal dialogs that some of you might be interested in. I'd be
interested to hear everyone's feedback not only on the technique but
the usability aspects of it.

Check it out - http://www.subimage.com/sublog/subModal/

Thanks...

--
seth at subimage interactive
http://subimage.com/sublog/

Comments

18 Feb 2005 - 6:10am
subimage interactive
2004

There's been a fair amount of discussion on the list lately about
DHTML technology and how it pertains to interface design.

I just wrote up a small article on how to implement cross-browser
DHTML modal dialogs that some of you might be interested in. I'd be
interested to hear everyone's feedback not only on the technique but
the usability aspects of it.

Check it out - http://www.subimage.com/sublog/subModal/

Thanks...
--
seth at subimage interactive
http://subimage.com/sublog/

18 Feb 2005 - 6:14am
Jesper Rønn-Jensen
2005

subimage interactive <subimage at gmail.com> wrote:
> I just wrote up a small article on how to implement cross-browser
> DHTML modal dialogs that some of you might be interested in. I'd be
> interested to hear everyone's feedback not only on the technique but
> the usability aspects of it.
First of all I think you have done a very well piece of work. Very
interesting technique. I really like your implementation. Staying in
the same window and "open" new window in centered iframe is smart
thought of.

Some immediate comments on usability
* WinXP style icons and title-bar might confuse Mac/linux/win 2000 users.
* Avoiding to open a new window eliminates risc of popup-blockers
interfering. Very good!
* Window not draggable or resizable

Also, using an iframe for the popup window creates a history entry
which means that the user can press the back-button. But it seems to
be broken, as no popup window opens when pressing back. Is this
intentional?

I also posted a comment at your website.

Kind regards,

Jesper Rønn-Jensen

--
Jesper Rønn-Jensen
Capgemini Danmark A/S
Oernegaardsvej 16
DK - 2820 Gentofte
Denmark

18 Feb 2005 - 10:08am
DeleteMe
2005

On Friday 18 February 2005 5:37 am, subimage interactive wrote:
> [Please voluntarily trim replies to include only relevant quoted material.]
>
> There's been a fair amount of discussion on the list lately about
> DHTML technology and how it pertains to interface design.
>
> I just wrote up a small article on how to implement cross-browser
> DHTML modal dialogs that some of you might be interested in. I'd be
> interested to hear everyone's feedback not only on the technique but
> the usability aspects of it.

I really like the dimming. But note that, the DHTML dialog is not really
modal, because you can still access the other browser options outside that
frame.

Both IE and Mozilla allow you to open "true modal" dialogs, provided you are
using signed JavaScript code. Only issue is that the signing methods are
different between the browsers. Many JS GUI libraries absstract the
differences out between the two to make it easy to open a cross-browser modal
dialog.

Opening a real modal dialog if the browser supports it, in combination with
your dimming effect, would be ideal I think.

--
If you wait by the river long enough, eventually
you will see the bodies of all your enemies float by.
- Sun Tzu

18 Feb 2005 - 10:23am
Dave Malouf
2005

Another way out of this is to "blur" your other frames w/ a layer that goes
on top of them (slightly transparent) that communicates the x-frame modality
AND actually functionally enforces it.

-- dave

On 2/18/05 10:08 AM, "Jason Keirstead" <jason at keirstead.org> wrote:

> [Please voluntarily trim replies to include only relevant quoted material.]
>
> On Friday 18 February 2005 5:37 am, subimage interactive wrote:
>> [Please voluntarily trim replies to include only relevant quoted material.]
>>
>> There's been a fair amount of discussion on the list lately about
>> DHTML technology and how it pertains to interface design.
>>
>> I just wrote up a small article on how to implement cross-browser
>> DHTML modal dialogs that some of you might be interested in. I'd be
>> interested to hear everyone's feedback not only on the technique but
>> the usability aspects of it.
>
> I really like the dimming. But note that, the DHTML dialog is not really
> modal, because you can still access the other browser options outside that
> frame.
>
> Both IE and Mozilla allow you to open "true modal" dialogs, provided you are
> using signed JavaScript code. Only issue is that the signing methods are
> different between the browsers. Many JS GUI libraries absstract the
> differences out between the two to make it easy to open a cross-browser modal
> dialog.
>
> Opening a real modal dialog if the browser supports it, in combination with
> your dimming effect, would be ideal I think.

18 Feb 2005 - 2:15pm
Will Tschumy
2004

I think it's a good approach from a design perspective - I've used a
similar approach in my own application design. I don't know about you,
but my original inspiration was based off of apple's "sheets."

As far as the specific implementation is concerned, we chose a
different path from using iframes. The problem that we had to solve (I
assume you were grappling with the same issue) was form elements
showing through the transparent div. Rather than using an iframe, we
dynamically changed the visibility of the input and select tags while
the modal dialog box is present. We're trying to avoid using iframes,
hence our approach.

Regardless, it's nice to see others thinking along the same lines.
Nice work. Will.

On Feb 18, 2005, at 6:10 AM, subimage interactive wrote:

> [Please voluntarily trim replies to include only relevant quoted
> material.]
>
> There's been a fair amount of discussion on the list lately about
> DHTML technology and how it pertains to interface design.
>
> I just wrote up a small article on how to implement cross-browser
> DHTML modal dialogs that some of you might be interested in. I'd be
> interested to hear everyone's feedback not only on the technique but
> the usability aspects of it.
>
> Check it out - http://www.subimage.com/sublog/subModal/
>
> Thanks...
> --
> seth at subimage interactive
> http://subimage.com/sublog/
> _______________________________________________
> Welcome to the Interaction Design Group!
> To post to this list ....... discuss at ixdg.org
> (Un)Subscription Options ... http://discuss.ixdg.org/
> Announcements List ......... http://subscribe-announce.ixdg.org/
> Questions .................. lists at ixdg.org
> Home ....................... http://ixdg.org/
>
>
for wct01 at earthlink.net
-----BEGIN PGP PUBLIC KEY BLOCK-----
Version: PGP 8.0.3

mQGiBEAqjm0RBAD28/HeQhyPnGjop1etuJTIMKAqEA0bcqNRApTxIxk3H9JnjHnE
ZOcIbq85KFdvKe7E5SkApZKzDsnSVOc180eFwRiAGE3aYi/ueOpeSqpiKLHj0zo1
yOP3f1QwhWYU5S0fBfTaSOidjneeRLFQ+NB2phXP2AyZU97wlAdRMA2/KwCg/zfc
juDFvzeHhEjXRSQXKEqY4+sD+wdI9air24wi97y3QNyQitBsyts25O0yCqgU0iEh
y62baTyOxi1VEVxveUAJNTnK7GILzTICYBOrX5NpQgBmWAEpC15oSMWYHb2UyTZm
3NbVihhVuWkCcY1L8Ik5jehRb0JyB0Cvp3dsLNjJouiFu10iMkVqjGQKadjCpGUZ
Zo40BADiG8V0lWZym8yQ67/lN7x3urB6TpFPH6sUbxQZESQwPnMKCdDHWEEyuL2M
rr/yJwrK+7vsnkLP1fYNS7ajCfYeH7832vuU1nbUFkLvLCeXS5DtHozYr6/hwqNy
io+3ECzsLc559n77REjEEvFNyNVoZvLx5a56mQzKXmz+EmcGrbQlV2lsbGlhbSBU
c2NodW15IDx3Y3QwMUBlYXJ0aGxpbmsubmV0PokAVgQQEQIAFwUCQCqObQcLCQgH
AwIKAhkBBRsDAAAAAAoJEIutTxYy9L9NJkYAoJNVHv9YqLbDrQoVqV3cs0prPtxT
AJYiveL5DQcAkhqIl3YPtnAMTrRTuQINBEAqjm0QCAD2Qle3CH8IF3KiutapQvMF
6PlTETlPtvFuuUs4INoBp1ajFOmPQFXz0AfGy0OplK33TGSGSfgMg71l6RfUodNQ
+PVZX9x2Uk89PY3bzpnhV5JZzf24rnRPxfx2vIPFRzBhznzJZv8V+bv9kV7HAarT
W56NoKVyOtQa8L9GAFgr5fSI/VhOSdvNILSd5JEHNmszbDgNRR0PfIizHHxbLY72
88kjwEPwpVsYjY67VYy4XTjTNP18F1dDox0YbN4zISy1Kv884bEpQBgRjXyEpwpy
1obEAxnIByl6ypUM2Zafq9AKUJsCRtMIPWakXUGfnHy9iUsiGSa6q6Jew1XpMgs7
AAICB/0Zz7j3QcmHtW8Uo71oUYQE18EzvbPIRW57moNSMW8C7VnPZWVMtYBRITqG
A4uLBMxNrmel7ytgFBrFDnGv4JfojRuUXCtX7kXNytDk26l982/iK0y6taBSCdqt
wrEpIR9K3paRGZvshGeCsFKl0FO1RWYltfwFfsY3dg/21KXi4lBo2PteZOeg/YUU
TvJi4y6p2Iauxww59io4jnw7uQdXDNsJsXE4htb396Pfcumu6H+Mjb2kAFz6l+nl
Iv6g8xMWqfLOTb4mt3yHwM9J/S74wHmzbh6U8xPorfPOWhftDWWSEB+Tq8Q8YysT
46WdJjUPuPZRarId8z4rDn33Seq+iQBMBBgRAgAMBQJAKo5tBRsMAAAAAAoJEIut
TxYy9L9NiuYAn2onSerK0LhL5elUeYM7J7BGJcy9AJwN1mDqz2ri1aRXpNR4eB82
VPpDMQ==
=Cv53
-----END PGP PUBLIC KEY BLOCK-----

18 Feb 2005 - 2:19pm
subimage interactive
2004

Yes, the iframe was used for a couple of reasons...

1: It allowed me to use separate html files for the dialogs, giving me
more flexibility overall.

2: It masks everything below it ;)

18 Feb 2005 - 2:32pm
Will Tschumy
2004

> <snip>

> I really like the dimming. But note that, the DHTML dialog is not
> really
> modal, because you can still access the other browser options outside
> that
> frame.
>
> Both IE and Mozilla allow you to open "true modal" dialogs, provided
> you are
> using signed JavaScript code. Only issue is that the signing methods
> are
> different between the browsers. Many JS GUI libraries absstract the
> differences out between the two to make it easy to open a
> cross-browser modal
> dialog.

> <snip>
By outside the frame, do you mean whatever other browser windows may be
open, or do you mean browser options, etc? Since we're talking about a
web app, the modal issue here is that the user must make a decision on
the 'pop-up' before proceeding, not that he can not interact with any
other application, window or element in the computer. It doesn't seem
like a pre-emptive multi-tasking computer environment, locking out all
other interactions is a reasonable design goal.

In the work that we've done, we decided not to use the modal javascript
pop-up for exactly the reason that it's still possible to loose the
association of the pop-up to the related window.

Do we need a redefinition of "modal?"

for wct01 at earthlink.net
-----BEGIN PGP PUBLIC KEY BLOCK-----
Version: PGP 8.0.3

mQGiBEAqjm0RBAD28/HeQhyPnGjop1etuJTIMKAqEA0bcqNRApTxIxk3H9JnjHnE
ZOcIbq85KFdvKe7E5SkApZKzDsnSVOc180eFwRiAGE3aYi/ueOpeSqpiKLHj0zo1
yOP3f1QwhWYU5S0fBfTaSOidjneeRLFQ+NB2phXP2AyZU97wlAdRMA2/KwCg/zfc
juDFvzeHhEjXRSQXKEqY4+sD+wdI9air24wi97y3QNyQitBsyts25O0yCqgU0iEh
y62baTyOxi1VEVxveUAJNTnK7GILzTICYBOrX5NpQgBmWAEpC15oSMWYHb2UyTZm
3NbVihhVuWkCcY1L8Ik5jehRb0JyB0Cvp3dsLNjJouiFu10iMkVqjGQKadjCpGUZ
Zo40BADiG8V0lWZym8yQ67/lN7x3urB6TpFPH6sUbxQZESQwPnMKCdDHWEEyuL2M
rr/yJwrK+7vsnkLP1fYNS7ajCfYeH7832vuU1nbUFkLvLCeXS5DtHozYr6/hwqNy
io+3ECzsLc559n77REjEEvFNyNVoZvLx5a56mQzKXmz+EmcGrbQlV2lsbGlhbSBU
c2NodW15IDx3Y3QwMUBlYXJ0aGxpbmsubmV0PokAVgQQEQIAFwUCQCqObQcLCQgH
AwIKAhkBBRsDAAAAAAoJEIutTxYy9L9NJkYAoJNVHv9YqLbDrQoVqV3cs0prPtxT
AJYiveL5DQcAkhqIl3YPtnAMTrRTuQINBEAqjm0QCAD2Qle3CH8IF3KiutapQvMF
6PlTETlPtvFuuUs4INoBp1ajFOmPQFXz0AfGy0OplK33TGSGSfgMg71l6RfUodNQ
+PVZX9x2Uk89PY3bzpnhV5JZzf24rnRPxfx2vIPFRzBhznzJZv8V+bv9kV7HAarT
W56NoKVyOtQa8L9GAFgr5fSI/VhOSdvNILSd5JEHNmszbDgNRR0PfIizHHxbLY72
88kjwEPwpVsYjY67VYy4XTjTNP18F1dDox0YbN4zISy1Kv884bEpQBgRjXyEpwpy
1obEAxnIByl6ypUM2Zafq9AKUJsCRtMIPWakXUGfnHy9iUsiGSa6q6Jew1XpMgs7
AAICB/0Zz7j3QcmHtW8Uo71oUYQE18EzvbPIRW57moNSMW8C7VnPZWVMtYBRITqG
A4uLBMxNrmel7ytgFBrFDnGv4JfojRuUXCtX7kXNytDk26l982/iK0y6taBSCdqt
wrEpIR9K3paRGZvshGeCsFKl0FO1RWYltfwFfsY3dg/21KXi4lBo2PteZOeg/YUU
TvJi4y6p2Iauxww59io4jnw7uQdXDNsJsXE4htb396Pfcumu6H+Mjb2kAFz6l+nl
Iv6g8xMWqfLOTb4mt3yHwM9J/S74wHmzbh6U8xPorfPOWhftDWWSEB+Tq8Q8YysT
46WdJjUPuPZRarId8z4rDn33Seq+iQBMBBgRAgAMBQJAKo5tBRsMAAAAAAoJEIut
TxYy9L9NiuYAn2onSerK0LhL5elUeYM7J7BGJcy9AJwN1mDqz2ri1aRXpNR4eB82
VPpDMQ==
=Cv53
-----END PGP PUBLIC KEY BLOCK-----

18 Feb 2005 - 2:41pm
Jon-Eric Steinbomer
2003

subimage interactive wrote:

>I just wrote up a small article on how to implement cross-browser
>DHTML modal dialogs that some of you might be interested in. I'd be
>interested to hear everyone's feedback not only on the technique but
>the usability aspects of it.
>
>Check it out - http://www.subimage.com/sublog/subModal/
>
>Thanks...
>
>
Would you know if this design is friendly to screen readers/508 compliance?

Thanks
Jon-Eric

18 Feb 2005 - 3:11pm
subimage interactive
2004

> By outside the frame, do you mean whatever other browser windows may
> be open, or do you mean browser options, etc? Since we're talking about a
> web app, the modal issue here is that the user must make a decision on
> the 'pop-up' before proceeding, not that he can not interact with any
> other application, window or element in the computer. It doesn't seem
> like a pre-emptive multi-tasking computer environment, locking out all
> other interactions is a reasonable design goal.

> In the work that we've done, we decided not to use the modal javascript
> pop-up for exactly the reason that it's still possible to loose the
> association of the pop-up to the related window.

> Do we need a redefinition of "modal?"

Exactly the reason why I implemented the modal dialog this way. I've
found during testing that "true" modal dialogs confuse a good portion
of my users.

I think locking all other applications or browser functions is a bit
silly. The idea behind this modal implementation is just as you stated
- the user should have to make a decision in the dialog before
continuing with whatever they're doing.

19 Feb 2005 - 9:05pm
david gee
2004

Will Tschumy wrote:
> I think it's a good approach from a design perspective - I've used a
> similar approach in my own application design. I don't know about you,
> but my original inspiration was based off of apple's "sheets."

This has become a pretty standard approach in web-apps development.
blakems.com had an excellent article on a draggable implementation of
this last July:

http://www.blakems.com/archives/000075.html

> As far as the specific implementation is concerned, we chose a different
> path from using iframes. The problem that we had to solve (I assume you
> were grappling with the same issue) was form elements showing through
> the transparent div. Rather than using an iframe, we dynamically
> changed the visibility of the input and select tags while the modal
> dialog box is present. We're trying to avoid using iframes, hence our
> approach.

this problem only exists in Internet Explorer, where "windowed" objects
such as select boxes always exist at a higher z-index than regular html
objects. there's a way around this, however: iframes exist as both
windowed and regular objects in IE 5.5+. Instead of creating a
transparent DIV, you can create a transparent IFRAME, and set its source
to a blank html file. It's important that you set a valid source on the
IFRAME, or you will get warnings when trying to deploy this on SSL sites.

--
david gee david at mode3.com http://www.mode3.com/david

Syndicate content Get the feed