Overlay CheckBox in JQuery Dialog

Question

Hello,

I have created a dialog with the JQuery dialog plugin. My dialog is defined as follows:

<div id="initialQuestions" title="Please complete the following">
  [Questions]
</div>
<div id="checkField" style="visibility:hidden; z-index:1001">
  <input type="checkbox" id="myCheck" value="Ignore in the Future?" />
</div>

<script type="text/javascript">
  $(document).ready(function () {
    $("#initialQuestions").dialog({
      autoOpen: false,
      modal: true,
      buttons: {
        'OK': function() {
          $(this).dialog('close');
        }
      }
    });
  });
</script>

I want to put a checkbox in the lower left corner of the dialog that says "Ignore in the future". Unfortunately, the JQuery dialog doesn't let you customize the footer of the dialog. So, I thought I would just add the checkbox as an overlay. However, I cannot figure out how to put a checkbox on top of the dialog in the lower left corner. Can someone explain to me how to do this? No matter what I do, the checkbox is not appearing where I want it.

Thank you

Answer 1

maybe this will help you:

http://jsbin.com/uqihu3/edit

I played around a bit, there are maybe better solutions. But this should work for you.

$(document).ready(function () {
   $("#initialQuestions").dialog({
     autoOpen: true,
     modal: false,
     width: 500,
     height: 300,
     buttons: {
       'OK': function() {
         $(this).dialog('close');
       },
       'dummy': function(e){          
       }
     },
     open: function(e, ui){
       $(e.target).parent().find('span').filter(function(){
         return $(this).text() === 'dummy';
       }).parent().replaceWith('<input type=\'checkbox\'>Do not bother me again, EVER!!</input>');
     }

  });
});​