Dojo Dijit and HTML5 in Real world applications/Dijit/dijit.Dialog

dijit.Dialog

Dialog with scrollbar

The dijit.Dialog will auto size by default. It is easy to force a fixed size. However, the styling of width, hight and overflow of the dijit.Dialog should be done inside the dijit.Dialog div tag:

<!-- Definition for the dijit.Dialog boxes -->
<div id="d1" data-dojo-type="dijit.Dialog" 
             data-dojo-props=" title: 'Scroling Dialog, draggable!',
                               tooltip:'The Tooltip property is not implemented for the dijit.Dialog!',
                               draggable: true"
             data-dojo-id="d1">
    <!-- width, height and overflow must be defined inside the dijit.Dialog: -->
    <div style="width: 350px; height: 100px; overflow: auto;">
        <p>
            This dijit.Dialog has a scrollbar because width, height and overflow has been specified inside the Pane:
        </p><p>    
            &lt;div style="width: 350px; height: 100px; overflow: auto;"&gt;
        </p><p>
            Note: The Tooltip property is not implemented for the dijit.Dialog!
        </p>
        
        <!-- Close button -->
        <button data-dojo-type="dijit.form.Button" 
        data-dojo-props=" onClick: function (){dijit.byId('d1').hide();}  ,
                          type: 'button'">
        Close dijit.Dialog!
        </button>
    </div>
</div>

If the style (height, width and overflow) are specified in the dijit.Dialog properties an unexpected result appears. See the demo of the dijit.Dialog implementation here.

Dialog with callback function

Very often you will need to call a function when the user close the pup-up dialog. In the next example we have a simple dijit.Dialog with a callback to the alert function - this is for demonstration only ;-)

<!-- Definition for the dijit.Dialog box -->
<div  data-dojo-type="dijit.Dialog" id="d1"
      data-dojo-props=" title: 'Scroling Dialog, draggable!',
                        onHide: function(){
                            alert('You closed the dijit.Dialog!')
                        }"
      data-dojo-id="d1">

See the full demo of the dijit.Dialog implementation here.

Verified in

IE 8, Firefox 3.6.22, Dojo 1.6.1

References

Demo of dijit.Dialog with scrollbar, draggable, non dragable