如何向 jQuery UI 对话框控件添加 Yes-No 按钮？单击 Yes 按钮时，表单应提交，单击 No 按钮时，对话框应关闭答案

【问题标题】：How to add Yes-No buttons to a jQuery UI dialog control?On click of Yes button the form should submit & on click of No button the dialog should close如何向 jQuery UI 对话框控件添加 Yes-No 按钮？单击 Yes 按钮时，表单应提交，单击 No 按钮时，对话框应关闭
【发布时间】：2014-03-11 05:29:15
【问题描述】：

jQuery 等用于我的网站。现在我将一个文件的 HTML 显示到一个 jQuery-UI 对话框模式弹出窗口中。此 HTML 包含一个带有提交按钮（value="Yes"）和一个普通按钮（value="No"）的表单。但是我想要的不是将这些按钮保留为我在对话框中显示的 HTML 的一部分，而是在显示 jQuQery 对话框弹出窗口时将这些按钮作为参数分配给对话框。但是这两个按钮的功能应该是相同的。也就是说，单击“是”按钮时，表单应提交，模式对话框应关闭，单击“否”按钮时，模式对话框应关闭。简而言之，我想从 HTML 中删除这些按钮并直接分配给对话框模式。供您参考，我将 HTML 代码以及对话框弹出代码放在下面。

<div id="favouriteQuestion" class="c-popup" style="display:none;">
  <div class="error_msg" id="report_error" style="text-align:center; margin-top:5px;">
  </div>
  <div class="clear"></div>  
  <form name="add_favourite_question_form" id="add_favourite_question_form" class="login_box" method="post" action="{$site_url}favourite_question.php">
    <input type="hidden" name="form_submitted" id="form_submitted" value="yes"/>
    <input type="hidden" name="op" id="op" value="add"/>
    <input type="hidden" name="fav_que_id" id="fav_que_id"/>
    <table class="trnsction_details" width="100%" cellpadding="5">
      <tbody>    
        <tr>
          <td>
            <p>Do you want to add this question as your favourite question?</p>
          </td>
          <td></td>            
        </tr>
        <tr>
          <td colspan="2">
            <input type="submit" name="yes" value="Yes" class="add_fav_que_yes" class="buttonin"/>
            <input type="button" name="no" value="No" class="add_fav_que_no" class="buttonin" onclick="$('#favouriteQuestion').dialog('close')";/>
          </td>
        </tr>
      </tbody>
    </table>
  </form>  
</div>

<a href ="#" style="margin-left:300px;" class="fav_que" id="{$question_data.question_id}">Add To Favourite Question</a>

它的jQuery代码如下：

$(document).ready(function() {


  $("#favouriteQuestion").dialog({
    autoOpen: false,
    modal:true,
    title: "Add To Favourite Question List",
    width: 400,                     
    close:{
    }           
    });
$(document).on("click","a.fav_que", function (e) {
  var que_id = this.id;  

  $("#fav_que_id").val(que_id);
  $("#favouriteQuestion").dialog('open');

  return false;
});

提前致谢。

【问题讨论】：

现在你已经在上面添加了模态框的jQuery代码，那么有什么问题呢？
@PratikJoshi：我不想将“是”和“否”按钮保留为表单 HTML 的一部分（即 div 中的内容）。我想使用 jQuery UI 对话框的按钮属性分别分配这些按钮。但功能应该是一样的。

标签： jquery jquery-ui button modal-dialog jquery-ui-dialog

【解决方案1】：

试试下面的方法，它使用yes no按钮，没有表单对话框关闭，如果是，你可以在这里应用表单提交的逻辑=> //在代码中做表单提交逻辑

function yesnodialog(button1, button2, element){
  var btns = {};
  btns[button1] = function(){ 
      element.parents('li').hide();
      $(this).dialog("close");
  };
  btns[button2] = function(){ 
      // Do Form submit logic
      $(this).dialog("close");
  };
  $("<div></div>").dialog({
    autoOpen: true,
    title: 'Condition',
    modal:true,
    buttons:btns
  });
}
$('.delete').click(function(){
    yesnodialog('Yes', 'No', $(this));
})

现场直播-

演示 - http://jsfiddle.net/CdwB9/4/

$('.delete').live('click', function(){ yesnodialog('是', '否', $(this)); })

【讨论】：