Loading ...
Sorry, an error occurred while loading the content.
 

Modal "Wait" Panel - Transparent Issue

Expand Messages
  • Tony Santinello
    Hi... I m trying to write javascript using yui that will display a wait panel when the user clicks submits a form. Similiar to the Modal Loading Example
    Message 1 of 1 , Jun 3, 2009
      Hi...
       
      I'm trying to write javascript using yui that will display a "wait" panel when the user clicks submits a form. Similiar to the Modal "Loading" Example in the YUI Library Examples.  When the user clicks on the submit button...a script will be called via onclick.  This method will display a panel...making the background transparent.  The code appears to be working in IE; but does not work in FF.  It appears that the style is not being applied to the panel.
       
      If I click on the submit button first it does not display correctly.  If I click on the link without doing the post it does display correctly.  If I then try clicking on the submit button...it will then display correctly.  Not sure why this is...does it have something to do with the post call?
       
      Also..in IE/FF when I have a more complex page using css/div/etc...it appears that the transperent modal overlays the acutal panel. Why is this?
       
      Here is the code I'm working with...
       
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>

          <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <title>WaitTest</title>
      <script language="JavaScript">
       function submitform()
       {
       wait =
              new YAHOO.widget.Panel("wait", 
                                              { width: "300px",
                                                fixedcenter: true,
                                                close: true,
                                                draggable: false,
                                                modal: true,
                                                visible: false,
                                                zIndex: 15000
                                              }
                                          );
      wait.setHeader("Your request is being processed.<br>Please be patient.");
      wait.setBody("<img id=\"wait\" src=\"http://l.yimg.com/a/i/us/per/gr/gp/rel_interstitial_loading.gif\"/>");
      wait.render(document.body);
        
           // Show the Panel
       setTimeout('document.images["wait"].src = "http://l.yimg.com/a/i/us/per/gr/gp/rel_interstitial_loading.gif"', 200);
          wait.show();
       }
       </script>
      <!--there is no custom header content for this example-->
      </head>
      <body class= "yui-skin-sam">
       <FORM action="" method=post>
        <TEXTAREA name=TEST rows=6 cols=85>TEST</TEXTAREA>
        
        <a href="javascript:submitform()">Test Wait Without Submit</a>
        <INPUT type=submit value=Submit! name=submit onclick="javascript:submitform()"> </P>
       </FORM> 
      </body>
      </html>

    Your message has been successfully submitted and would be delivered to recipients shortly.