85 users online (0 members and 85 guests)  


  Results 1 to 3 of 3

Related

  1. how to open save/open dialog using HTML    Forum: HTML Forum
    Replies: 1
  2. small programmes    Forum: Myspace Forum
    Replies: 1
  3. Help with a small counter    Forum: Javascript Forum
    Replies: 2
  4. Small tutorial    Forum: Show it off!
    Replies: 1
  5. Save As Dialog Box    Forum: Website Scripts Forum
    Replies: 3
  1. #1
    js2006's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2006
    Location
    New york,America
    Posts
    4

    Exclamation a small dialog box:

    iam new to the forums,i hope i will get help from here:


    • write a script in which you want to open a small dialog box on the screen, ask a yes/no question and have 2-3 buttons: yes, no, and cancel, depending on which is selected, the appropriate page is then displayed in the browser window - is this possible and how might it be done in JavaScript?

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: a small dialog box:


    Hi there js2006,

    have a look at this example, it can be used for multiple questions and destination pages...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>questions and destinations</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    body {
        background-color:#eef;
        color:#000;
     }
    #container {
        width:150px;
        border:3px double #000;
        color:#000;
        background-color:#fff; 
     }
     
    #container  li {
        margin: 8px;
     }
    #container  a{
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
        color:#000;
        background-color:#fff;
     }
    #box {
        width:310px;
        height:160px;
        border:3px outset #666;
        margin:30px auto;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
        color:#000;
        background-color:#d4d0c8;
        text-align:center;
        display:none;
    }
    #info {
        line-height:30px;
        padding-left:20px;
        background-image:url(http://mysite.orange.co.uk/azygous/images/bl_bg.jpg);
        font-weight:bold;
        color:#fff;
        text-align:left;
        background-color:inherit;
    }
    #box h1{
        font-size:16px;
    }
    #box input{
        margin:40px 10px 0 10px;;
    }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    
      var num;
    
      var questions=new Array();
            questions[0]='is coothead follicly challenged?';
            questions[1]='are you follicly challenged?';
    
      var destinations=new Array();
            destinations[0]='http://www.google.com';
            destinations[1]='http://www.bbc.co.uk';
            destinations[2]='http://www.theguardian.co.uk';
            destinations[3]='http://www.yahoo.com';
            destinations[4]='http://www.channel4.co.uk';
            destinations[5]='http://www.timesonline.co.uk';
    
    window.onload=function() {
    
       anc=document.getElementById('container').getElementsByTagName('a');
       but=document.getElementById('box').getElementsByTagName('input');
       obj=document.getElementById('box');
    
    for(c=0;c<anc.length;c++) {
    anc[c].onclick=function() {
       num=this.id.split('q')[1];
       document.getElementById('question').firstChild.data=questions[num];
       obj.style.display='block';
      }
     }
    for(c=0;c<but.length;c++) {
    but[c].onclick=function() {
    if((this.id=='yes')&&(num==0)) {
       location.href=destinations[0];
       obj.style.display='none';
       return;
     }
    if((this.id=='no')&&(num==0)) {
       location.href=destinations[1];
       obj.style.display='none';
       return;
     }
    if((this.id=='can')&&(num==0)) {
       location.href=destinations[2];
       obj.style.display='none';
       return;
     }
    if((this.id=='yes')&&(num==1)) {
       location.href=destinations[3];
       obj.style.display='none';
       return;
     }
    if((this.id=='no')&&(num==1)) {
       location.href=destinations[4];
       obj.style.display='none';
       return;
    }
    if((this.id=='can')&&(num==1)) {
       location.href=destinations[5];
       obj.style.display='none';
       return;
        }
       }
      }
     }
    
    //-->
    </script>
    
    </head>
    <body>
    
    <div id="container">
    <ol>
    <li><a id="q0" href="#">question</a></li>
    <li><a id="q1" href="#">question</a></li>
    </ol>
    </div>
    
    <div id="box">
    
    <div id="info">question</div>
    
    <h1 id="question">&nbsp;</h1>
    
    <form action="#">
    <div>
    <input id="yes" type="button" value="yes"/>
    <input id="no" type="button" value="no"/>
    <input id="can" type="button" value="cancel"/>
    </div>
    </form>
    
    </div>
    
    </body>
    </html>

  3. #3
    js2006's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2006
    Location
    New york,America
    Posts
    4

    Smile Re: a small dialog box:

    Thanks,
    for the help Coothead !!



Tags for this Thread