在JQuery对话框中叠加CheckBox

时间:2010-06-28 14:22:15

标签: jquery

我已经使用JQuery对话框插件创建了一个对话框。我的对话框定义如下:

<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>

我想在对话框的左下角放置一个复选框,上面写着“将来忽略”。不幸的是,JQuery对话框不允许您自定义对话框的页脚。所以,我想我只是将复选框添加为叠加层。但是,我无法弄清楚如何在左下角的对话框顶部放置一个复选框。有人可以向我解释如何做到这一点?无论我做什么,复选框都没有出现在我想要的地方。

谢谢

1 个答案:

答案 0 :(得分:4)

也许这会对你有所帮助:

http://jsbin.com/uqihu3/edit

我玩了一下,可能有更好的解决方案。但这应该适合你。

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

  });
});​