I have a page which uses the jQueryUI datepickers (which have worked like a champ until now).

I added a button ("Select Departments") which invokes a dialog. Now when I mash the button, the "Begin Date" datepicker widget drops down (??? - and disabled at that) -- and freezes the page colder than Fargo in February:

The HTML and jQuery (and a smidgen of CSS) follow:

HTML:

1. <button id="btnSelDepts">select Depts</button>
   <div id="dialog" title="Select the Depts you want to include in the report" style="display:none;">
       <div>
           <section class="breakAfter">
               <label for="ckbxSelectAll">Select All</label>
               <input type="checkbox" id="ckbxSelectAll" />
               <label for="ckbxDeselectAll">Deselect All</label>
               <input type="checkbox" id="ckbxDeselectAll" />
           </section>
           <label for="ckbx2">2</label>
           <input type="checkbox" id="ckbx2" />
           <label for="ckbx3" id="lbl3">3</label>
           <input type="checkbox" id="ckbx3" />
           <label for="ckbx4">4</label>
   . . .
           <label for="ckbx98">98</label>
           <input type="checkbox" id="ckbx98" />
           <label for="ckbx99">99</label>
           <input type="checkbox" id="ckbx99" />
       </div>
   </div>
   
   

CSS:

1. .breakAfter {
       display:block;
   }

jQuery:

1. var deptsSelected = '';
   $("#btnSelDepts").click(function () {
       $("#dialog").dialog({
           modal: true
       });
   
   
       $("input:checkbox").click(function () {
           var checkedVal = $("label[for='" + this.id + "']").text();
   
   
           if (checkedVal == "Select All") {
               $(":checkbox").prop("checked", true);
               $("#ckbxDeselectAll").prop("checked", false);
               deptsSelected = $.map($(':checkbox:not(#' + this.id + '):checked'), function (elem, index) {
                   return $("label[for='" + elem.id + "']").text();
               }).join(',');
           } else if (checkedVal == "Deselect All") {
               $(":checkbox").prop("checked", false);
               $("#ckbxDeselectAll").prop("checked", true);
               deptsSelected = '';
           } else {
               if (deptsSelected.indexOf(checkedVal) < 0) {
                   deptsSelected += $("label[for='" + this.id + "']").text() + ',';
               }
           }
       });
   });

This is also at http://jsfiddle.net/clayshannon/WbZrW/3/

Update: If I change the dialogs modal boolean from true to false, it pretty much works - but the datepicker still drops down when I mash the button!