Question

我有一个jQuery对话框，它在页面加载时运行，我希望实现一个功能，只有在选中条款和条件复选框时才关闭jQuery对话框，但按钮点击事件不起作用。

$("<div title='E-Certificate'><h2 style = 'color:black'><b>Electronic Certificate of Origin</b></h2><p align = 'right' >،،، الاعضاء الكرام</p><p align = 'right'>تماشيا مع مبادرات الحكومة الذكية ومن ضمن جهود غرفة دبي لتسهيل الأعمال، يرجى العلم بأنه سيتم توثيق الفواتير </p><p align = 'right'>وبيانات التعبئة الخاصة بشهادة المنشأ تلقائيا من خلال النظام وذلك عوضا عن استخدام الملصق الحالي.</p><p align = 'right'>وسوف تكون الخدمة الزامية ابتداء من 18 نوفمبر 2017</p><p align = 'right'>،،، شاكرين لكم حسن تعاونكم</p><p align = 'left'>Dear Member,</p><p align = 'left'>In line with Dubai Smart Government initiative and as part of Dubai Chamber’s efforts to help members do business with ease, please be noted that invoices and packing list will be stamped automatically from the systems replacing the existing stickers.</p><p align = 'left'>Which will be mandatory from 18th Nov 2017.</p><p align='left'>Thanks for your cooperation.</p><p align='left'>،،،</p><br>For more details, please <a href = 'htmltemplates/DC%20Electronic%20COO%20User%20Guide.pdf'  target='_blank' style = 'color:blue'>click here</a><form action='#' onsubmit='if(document.getElementById('agree').checked) { return true; } else { alert('Please indicate that you have read and agree to the Terms and Conditions and Privacy Policy'); return false; }'><input type='checkbox' name='checkbox' value='check' id='agree' /> I have read and agree to the Terms and Conditions and Privacy Policy\n<p></p><input type='submit' name='submit' value='CLose' style = 'background-color: #10304c;border: none;color: white;padding: 5px 5px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px; margin: 4px 2px;cursor: pointer;border-radius:2px; '/></form></div>").dialog();

这是小提琴： - http://jsfiddle.net/9z2ag/475/

Answer 1

在jueryui-creator上添加按钮，如下所示：

$( "#dialog").dialog({
  modal: true,
  buttons: {
    Ok: function() {

      if ("checkbox.checked") $( this ).dialog( "close" );
    }
  }
});

Answer 2

$("#dialog").dialog({
  autoOpen: false,
  height: 300,
  width: 350,
  resizable: false,
  autoOpen: false,
  modal: true,
  buttons: {
    'Ok' : function() {
      $("#dialog-form").dialog( "close" );  
    } 
  }
});

Answer 3

$("<div title='E-Certificate'><h2 style = 'color:black'><b>Electronic Certificate of Origin</b></h2><p align = 'right' >،،، الاعضاء الكرام</p><p align = 'right'>تماشيا مع مبادرات الحكومة الذكية ومن ضمن جهود غرفة دبي لتسهيل الأعمال، يرجى العلم بأنه سيتم توثيق الفواتير </p><p align = 'right'>وبيانات التعبئة الخاصة بشهادة المنشأ تلقائيا من خلال النظام وذلك عوضا عن استخدام الملصق الحالي.</p><p align = 'right'>وسوف تكون الخدمة الزامية ابتداء من 18 نوفمبر 2017</p><p align = 'right'>،،، شاكرين لكم حسن تعاونكم</p><p align = 'left'>Dear Member,</p><p align = 'left'>In line with Dubai Smart Government initiative and as part of Dubai Chamber’s efforts to help members do business with ease, please be noted that invoices and packing list will be stamped automatically from the systems replacing the existing stickers.</p><p align = 'left'>Which will be mandatory from 18th Nov 2017.</p><p align='left'>Thanks for your cooperation.</p><p align='left'>،،،</p><br>For more details, please <a href = 'htmltemplates/DC%20Electronic%20COO%20User%20Guide.pdf'  target='_blank' style = 'color:blue'>click here</a><br><input type='checkbox' name='checkbox' value='check' id='agree' /> I have read and agree to the Terms and Conditions and Privacy Policy\n<p></p><div id = 'openCandy'><input type='button' name='submit' value='Close'  style = 'background-color: #10304c;border: none;color: white;padding: 5px 5px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px; margin: 4px 2px;cursor: pointer;border-radius:2px; '/></div></form</div>").dialog();



 $('#openCandy').click(function() {
           if ( $('input[name="checkbox"]').is(':checked') ) {
            $(this).closest('.ui-dialog-content').dialog('close'); 
            }
            else {
            swal('Accept the terms and conditions.');
            //alert ("Please accept the terms and conditions !!")
            }
    });

这是我的代码，它对我有用

按钮单击无法在我的jQuery对话框中工作

3 个答案: