SOURCE CODE: Dialog
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Dialog | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="Uize.Widgets.Dialog.Widget"/>
  <meta name="description" content="See an example of a draggable modal JavaScript dialog that uses inline HTML (rather than a blockable popup window) and has a shield to block the page."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Dialog
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/dialog.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of the <a href="../reference/Uize.Widgets.Dialog.Widget.html"><code>Uize.Widgets.Dialog.Widget</code></a> class is being used to implement a draggable dialog for a modal dialog. The dialog is not resizable (the corners and sides are NOT active), but it is draggable and can be moved around by clicking-and-dragging on its title bar. The draggable dialog widget has child widgets for the <b>"OK"</b>, <b>"CANCEL"</b>, and <b>"CLOSE"</b> buttons.</p>

    <p>There is a shield that is displayed when the dialog is opened up. This shield is faded out when you drag the dialog, with the idea being that if the user moves a dialog they quite likely are trying to move it out of the way in order to reveal something behind it, so nothing behind the dialog should remain obscured by a shield. Even when not visible, the shield is still present and blocks events to elements beneath the dialog in order to ensure its modal behavior.</p>

    <p>The dialog widget provides a facility for a dialog to be moored to any node in a document, regardless of where the mooring node is in the DOM in relation to the dialog which needs to be absolutely positioned and above everything else in the document. The dialog in this example is moored to the DIV conspicuously named "MOORING NODE". Try resizing the document and notice how the dialog keeps its positional relationship to this DIV - even once you've moved the dialog.</p>

    <p>To open the dialog, click the <b>"OPEN DIALOG"</b> button below.</p>
  </div>

  <center>
    <div id="page-openDialogButton" style="margin-bottom: 20px;"></div>

    <table id="dialogMooringNode" style="width:170px; height:170px; border:1px dashed #fff;" class="insetBackgroundColor">
      <tr><td align="center" valign="center">MOORING NODE</td></tr>
    </table>
  </div>
  </center>
</div>

<!-- JavaScript code to wire up the page -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widgets.Dialog.Widget',
    'Uize.Str.Repeat',
    'Uize.Widgets.Button.Widget'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** create the Uize.Widgets.Dialog.Widget object ***/
      var dialog = page.addChild (
        'dialog',
        Uize.Widgets.Dialog.Widget,
        {
          mooringNode:'dialogMooringNode',
          offsetX:30,
          offsetY:-150,
          built:false,
          width:500,
          title:'DRAGGABLE DIALOG',
          children:{
            contents:{
              html:
                '<div style="padding:5px;">' +
                  Uize.Str.Repeat.repeat ('This is a draggable dialog. ',50) +
                '</div>'
            }
          }
        }
      );

    /*** add the button for opening the dialog ***/
      page.addChild (
        'openDialogButton',
        Uize.Widgets.Button.Widget,
        {
          text:'OPEN DIALOG',
          built:false,
          action:function () {dialog.set ({shown:true})}
        }
      );

    /*** wire up the page widget ***/
      page.wireUi ();
  }
);

</script>

</body>
</html>