dojo--dialog

 

Click the buttons below to display dojo's modal dialog widget:

Form Non-blocking, 5 seconds
Blocking, 2 seconds Blocking, 2 seconds of 5 seconds

Name:
Location:
Description:
Location:

Disappearing in 3... [X]

Disappearing in 3... [X]

Disappearing in 3... [X]

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 >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< style  type ="text/css" > ...
    body {...}{ font-family : sans-serif; }
    .dojoDialog {...}{
        background : #eee;
        border : 1px solid #999;
        -moz-border-radius : 5px;
        padding : 4px;
    }
    
    form {...}{
        margin-bottom : 0;
    }

    /**//* group multiple buttons in a row */
    .box {...}{
        display: block;
        text-align: center;
    }
    .box .dojoButton {...}{
        float: left;
        margin-right: 10px;
    }
    .dojoButton .dojoButtonContents {...}{
        font-size: medium;
    }

style >

< script  type ="text/javascript" > ...  djConfig = ...{ isDebug: true };  script >
< script  type ="text/javascript"  src ="dojo-0.4/dojo.js" > script >
< script  type ="text/javascript" > ...
    dojo.require("dojo.widget.Dialog");
    dojo.require("dojo.widget.Button");
script >

< script  type ="text/javascript" > ...
var dlg0, dlg1, dlg2, dlg3;
function init(e) ...{
    dlg0 = dojo.widget.byId("dialog0");
    var btn = document.getElementById("hider0");
    dlg0.setCloseControl(btn);

    dlg1 = dojo.widget.byId("dialog1");
    var timer = document.getElementById("timer1");
    dlg1.setTimerNode(timer);
    var btn = document.getElementById("hider1");
    dlg1.setCloseControl(btn);

    dlg2 = dojo.widget.byId("dialog2");
    timer = document.getElementById("timer2");
    dlg2.setTimerNode(timer);
    btn = document.getElementById("hider2");
    dlg2.setCloseControl(btn);
    
    dlg3 = dojo.widget.byId("dialog3");
    timer = document.getElementById("timer3");
    dlg3.setTimerNode(timer);
    btn = document.getElementById("hider3");
    dlg3.setCloseControl(btn);
}
dojo.addOnLoad(init);

script >



< title > 无标题文档 title >
head >

< body >
< p > Click the buttons below to display dojo's modal dialog widget: p >

< div  class ="box" >
     < button  dojoType ="button"  onclick ="dlg0.show()" > Form button >     
     < button  dojoType ="button"  onclick ="dlg1.show()" > Non-blocking, 5 seconds button >
     < br  />
     < button  dojoType ="button"  onclick ="dlg2.show()" > Blocking, 2 seconds button >     
     < button  dojoType ="button"  onclick ="dlg3.show()" > Blocking, 2 seconds of 5 seconds button >
div >
< br  clear =both >
< br >
< br >

< div  dojoType ="dialog"  id ="dialog0"  bgColor ="white"  bgOpacity ="0.5"  toggle ="fade"  toggleDuration ="250" >
     < form  onsubmit ="return false;" >
         < table >
             < tr >
                 < td > Name: td >
                 < td >< input  type ="text" > td >
             tr >
             < tr >
                 < td > Location: td >
                 < td >< input  type ="text" > td >
             tr >
             < tr >
                 < td > Description: td >
                 < td >< input  type ="text" > td >
             tr >
             < tr >
                 < td > Location: td >
                 < td >< input  type ="file" > td >
             tr >
             < tr >
                 < td  colspan ="2"  align ="center" >
                     < input  type ="button"  id ="hider0"  value ="OK" > td >
             tr >
         table >
     form >
div >


< div  dojoType ="dialog"  id ="dialog1"  bgColor ="red"  bgOpacity ="0.1"  toggle ="fade"  toggleDuration ="250"  lifetime ="5000" >
    Disappearing in  < span  id ="timer1" > 3 span > ...  < a  id ="hider1"  href ="#" > [X] a >
div >

< div  dojoType ="dialog"  id ="dialog2"  bgColor ="blue"  bgOpacity ="0.3"  toggle ="fade"  toggleDuration ="250"  lifetime ="2000"  blockDuration ="2000" >
    Disappearing in  < span  id ="timer2" > 3 span > ...  < a  id ="hider2"  href ="#" > [X] a >
div >


< div  dojoType ="dialog"  id ="dialog3"  bgColor ="green"  bgOpacity ="0.5"  toggle ="fade"  toggleDuration ="250"  lifetime ="5000"  blockDuration ="2000" >
    Disappearing in  < span  id ="timer3" > 3 span > ...  < a  id ="hider3"  href ="#" > [X] a >
div >

body >
html >