Overlay CheckBox in JQuery Dialog

Question

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

jAndy · Accepted Answer · 2010-06-28 14:58:07Z

4

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>');
     }

  });
});

answered Jun 28, 2010 at 14:58

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user208662 Over a year ago

Very slick. Thank you for your help.

Collectives™ on Stack Overflow

Overlay CheckBox in JQuery Dialog

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related