Problems with BLockUI andfollowing popups.

Problems with BLockUI andfollowing popups.

In using BlockUI, I found that if I showed a dialog and then very quickly after that, showed another I was left with a partial window which I couldt remove.  I tried lots of UnblockUI placements in the events etc with no luck.
 
So, I decided to create the DOM elements dynamically and give them unique names which I would use for the dlalogs and then use an OnUnblock call to remove the unique DOM elements.  this worked perfectly.
 
So I share with you here.  These are for use with themeRoller and with the themeOverlay option I posted earlier.
 
2 functions showInfo and getInfo
 
Add the following DOM elements to to your page:
 
  1. <div id="infopopup"></div>
Add the following two functions:
 
  1. function showInfo(msgHTML, cTitle, id) {
       $('#infopopup').append('<div id="' + id + '"></div>');
       $('#' + id + '').html(msgHTML+'<p><input type="button" class="ui-state-default ui-corner-all" id="infook" value="Ok" />');
       $('#infook').click(function(e) {
        e.preventDefault();
        $.unblockUI();
        $('#' + id + '').remove();
        return false;
        }).hover(
         function(){
          $(this).addClass("ui-state-hover");
         },
         function(){
          $(this).removeClass("ui-state-hover");
         }
        );
       $.blockUI({
        message: $('#' + id + ''),
        theme: true,
        themeOverlay: false,
        title: cTitle,
        css: { width: '350px' }
       });
      }






















  2.   function getInfo(msgHTML, cTitle, btnOpts, id) {
       $('#infopopup').append('<div id="' + id + '"></div>');  
       var fullHTML = msgHTML+'<p>';
       for (var n = 0; n < btnOpts.length; n++) {
        fullHTML +='<input class="ui-state-default ui-corner-all" type="button" id="' + btnOpts[n][1] + '" value="' + btnOpts[n][0] +'" />&nbsp;&nbsp;';
       }
       $('#' + id + '').html(fullHTML);
       for (var n = 0; n < btnOpts.length; n++) {
        $('#' + btnOpts[n][1] + '').click(btnOpts[n][2]);
        $('#' + btnOpts[n][1] + '').hover(
         function(){
          $(this).addClass("ui-state-hover");
         },
         function(){
          $(this).removeClass("ui-state-hover");
         }
        )
       }
       $.blockUI({
        message: $('#' + id + ''),
        theme: true,
        themeOverlay: false,
        title: cTitle,
        onUnblock: function () {
         $('#' + id + '').remove();    
        },
        css: { width: '350px' }
       });
      }



























 
Then, using the two functions listed below, make calls to raise dialogs as follows:
Examples 1:
 
Simple message dialog with an OK button.  Simply shows the message with an OK button and nothing to execute on click except remove the dialog:
 
  1. showInfo('<p> Creates can be found at <link here> and provides support and tips for the use of SharePoint.  It also has the SharePoint App Framework for installing and managing custom code webparts which are packaged and can be installed on pages in your site.</p>','C.R.E.A.T.E.S','x100');
 
Example 2:
 
Set the functions to execute on the button: (I have included example actions here)
  1. var warning = function(e) {
       $("#checkAppInstall").attr('checked', false);
       $("#checkAppDisclaimer").attr('checked', false);
       $("#startInstallation").prop("disabled",!$("#startInstallation").prop("disabled"));
       $.unblockUI();
       return false;
      };
    var warningbtnOpts = [['Ok','OK1',warning]];






Of course remember to put your own functions in!
 
  1. getInfo('You have not checked that you wish to install the Framework.  Please do so before retrying.  Thank You!','Please check the Install Box!',warningbtnOpts,'g300');
 
Example 3:
Multiple buttons with functions for each of them:

Set up the button functions:
 

  1. var execute = function(e) {
     e.preventDefault();      
     $.unblockUI();      
     if ($("#checkAppDisclaimer:checked").val() == 'on') {    
      startInstallation00();
     } else {
      getInfo('You have not checked that you have read and understood the disclaimer.  Please do so before retrying.  Thank You!','Please check the DISCLAIMER Box!',warningbtnOpts,'g100');
     }
    };
    var cancel = function(e) {
     e.preventDefault();      
     $("#checkAppDisclaimer").attr('checked', false);
     $("#startInstallation").prop("disabled",!$("#startInstallation").prop("disabled"))
     $.unblockUI();
    };
    var executeOpts = [['Install','INSTALL1',execute],['Cancel','CANCELL1',cancel]];















And then call to show the dialog:
 
  1. getInfo('Do you wish to continue installing the SharePoint App Framework on your site.  You of course have read and accepted the disclaimer below so you understand what you are adding to your site?','Install SharePoint App Framework!',executeOpts,'g200');
 
Hope this helps someone here.  Drove me mad trying to fix it. 
 
T.