A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on Chat (such as one of these permanent autoconfirmed members).

Dialogs

From WHATWG Wiki
Jump to navigation Jump to search

Problem statement

There's no markup or API for dialog boxes, tool palettes, hovering tooltips, the contents of popup widgets, and the like.

Real world examples today

Dialogs

Registration Dialogs

  • http://www.reddit.com/ - make sure to be logged out if you have an account, and click the register link
  • http://digg.com/ - make sure to be logged out if you have an account, and click the Join Digg! button
  • http://slashdot.org/ - make sure to be logged out if you have an account, and click the Join link

Login Dialogs

  • http://slashdot.org/ - make sure to be logged out if you have an account, and click the Log In link
  • http://digg.com/ - make sure to be logged out if you have an account, and click the Login button
  • http://newsvine.com/ - make sure to be logged out if you have an account, and click the Log In | Register link
  • http://www.bahn.de/ - Login link is rightmost in main navigation bar - try tapping: funny handling of focus order, skipping positions, at times keyboard trap

Other Dialogs

  • http://www.kongregate.com/ - register for account, log in, click Get Kreds, click Fund Your Account button
  • GMail - Click "more" on the left, then Create New Label.

Tooltips

  • The tooltips in the table of [1] are interesting because they are currently <div>s and force the parent to be a TD rather than a TH since TH is inline only, even though the visible content is really just phrasing content.
  • GMail's contacts list has rich tooltips.

Lightboxes

Other

A list of URLs from Steve Faulkner to look at — if anyone has the time to go through these and pick out those that are real use cases (as opposed to demos or examples, since those tend to not reflect real needs but more reflect what's easy to demo!) then please add them where appropriate above.

http://flowplayer.org/tools/overlay/index.html http://alloy.liferay.com/deploy/demos/dialog/ http://www.bbc.co.uk/glow/docs/1.5/furtherinfo/widgets/overlay/ http://rightjs.org/ui/dialog/demo http://jqueryui.com/demos/dialog/ http://download.dojotoolkit.org/release-0.4.2/dojo-0.4.2p1-widget/tests/widget/test_Dialog.html http://www.sencha.com/examples/pages/window/hello.html http://www.sencha.com/examples/pages/window/dialog.html http://www.sencha.com/examples/pages/window/accordion.html http://dev.sencha.com/deploy/ext-4.0.2a/examples/window/window.html http://leandrovieira.com/projects/jquery/lightbox/ http://www.huddletogether.com/projects/lightbox/ http://developer.yahoo.com/yui/examples/container/panel.html http://reghellin.com/milkbox/ http://bertramakers.com/moolabs/imagezoom.php http://www.aryweb.nl/projects/MooDialog/

Code Examples

Reddit

HTML: 

<a href="#" onclick="return showcover(false);">register</a>
...
<div class="login-popup cover-overlay" style="display: none; "
    <div class="cover" onclick="return hidecover(this)"></div>
    <div class="popup">
        ...
    </div>
</div>

Javascript: 

function showcover(a, b) {
    $(".login-popup:first").show().find('form input[name="reason"]').val(b || "");
    return !1
}
function hidecover(a) {
    $(a).parents(".cover-overlay").hide();
    return !1
}

(showcover() has been truncated to remove code not relevant to showing the dialog: if variable a is set as 'true', another element (not found in this page) is also shown)

CSS: 

.popup {
  position: fixed;
  left: 10%;
  background-color: white;
  top: 40px;
  width: 80%;
  z-index: 1001;
}
.cover {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: gray;
  opacity: .7;
  z-index: 1000;
}

Slashdot

HTML: 

<div id="modal_cover" class="push" onclick="hide_modal_box(); return false;" style="display: none;"></div>
<div id="modal_box" class="push" style="display: none;">
   ...
   <div id="modal_box_content">...</div>
</div>

<a href="//slashdot.org/my/newuser" onclick="javascript:getModalPrefs('newUserModal', 'Create Account', 1); $('#modal_box').addClass('join'); return false;" class="btn link">Join</a>

Javascript: (getModalPrefs has been truncated to remove code not relevant to showing the dialog) 

function getModalPrefs(section, title, tabbed, params) {
    Slash.busy(BUSY_FETCHING_MODAL, true);
    $bg = get_modal_parts('#modal_cover').css('opacity', 0.75).show();
    $any('modal_box_content').load('/ajax.pl', $.extend({op: this_op,section: section,reskey: reskey_static,tabbed: tabbed,return_to: return_to}, params || null), function(response, status, transport) {
        if (status === 'success') {
            $any('preference_title').html(title);
            var $modal = show_modal_box().data('tabbed', tabbed);
            tabbed && $modal.addClass("tabbed");
        } else {
            $bg.hide();
        }
        Slash.busy(BUSY_FETCHING_MODAL, false);
    });
}

function show_modal_box() {
    return custom_modal_box('show').keyup(function(e) {
        e.which == $.ui.keyCode.ESCAPE && hide_modal_box();
    });
}

function hide_modal_box() {
    var retainclass = " ";
    if ($('#modal_box').hasClass('push')) {
        retainclasses = 'push';
    }
    custom_modal_box('hide').hide().attr('style', 'display: none;').removeClass().addClass(retainclasses).removeData('tabbed').unbind();
    if (document.forms.modal_prefs && document.forms.modal_prefs.refresh_onclose && document.forms.modal_prefs.refresh_onclose.value) {
        document.location = document.URL;
    }
    return false;
}

CSS: 

#modal_box.join {
  margin: 0px 33% 0;
  width: 390px;
  height: 440px;
}
#embbeded_login_modal.push, #modal_box.push {
  margin-top: 9em !important;
}
#modal_box {
  position: fixed;
  z-index: 1000001;
}
#modal_cover {
  margin-top: -12px;
  margin-left: -13px;
  background: rgba(0, 0, 0, .6);
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 1000000;
}

DB Dahn

HTML: 

<li id="mn-login" class="rollover">
    <a href="https://fahrkarten.bahn.de/privatkunde/start/start.post?lang=de&scope=login" id="login" class="jhover" rel="nofollow"><span>Login</span></a>
    <h3><span>Login</span></h3>
    <ul>...</ul>
</li>

If #mn-login is given class of rollover (done using javascript on focus and mouseover, removed on blur, the h3 and ul tags are displayed in CSS: 

#main-nav ul ul, #main-nav ul h3 {
  border: 1px solid #9FA3AB;
  display: none;
  left: -9999em;
  position: absolute;
}
#main-nav li#mn-login.rollover h3 {
  left: -6px;
}
#main-nav li#mn-login.rollover ul {
  left: auto;
  right: 6px;
}


Brainstorms

(These are random ideas inspired by the above and similar APIs in other languages. They need careful evaluation and are not a proposal.)

  • <dialog; element. defaults to display:none; height:shrinkwrap; width: shrinkwrap; position: center;.
  • <dialog> <dialogtitle> ... </dialogtitle> ... </dialog>
  • <dialog caption=""> to give title (instead of <dialogtitle>)
  • <dialog canclose=""> to toggle close box
  • dialog title area can be dragged (cursor:move).
  • dialog.show() / .hide();
  • show at cursor position, track cursor position, show at offset from cursor position...
  • have to handle showing an element that's descendant of display:none content; does that just not count?
  • dilaog.showModal() / .close(returnValue) / .returnValue
  • callbacks as arguments to show() and especially showModal(), as in, dialog.showModal(function (returnValue) { ... })
  • <input type=dialog-button value=returnValue> / <button type=dialog-button value=returnValue> - default action is to close dialog and set .returnValue to the button's value
  • dialog::cover { } to style a position:fixed rect that covers the viewport under a modal dialog
  • dialog[open] like details[open]
  • what does hidden="" do on such an element?
  • <info> as a child of an element for a rich tooltip
  • <info for=""> to give tooltip for an element that can't have children, like <img>, <option>
  • A feature to have info boxes point at a particular other element (think the bubbles on Google maps, the new feature notifications in GMail)
Retrieved from "https://wiki.whatwg.org/index.php?title=Dialogs&oldid=6606"