在表单提交中实现 jQuery 确认模式？答案

【问题标题】：Implement jQuery confirmation modal in a form submit?在表单提交中实现 jQuery 确认模式？
【发布时间】：2013-06-11 06:17:13
【问题描述】：

我正在使用这样的 jQuery 模态确认：

$(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:190,
      width: 330,
      modal: true,
      buttons: {
        "Yes": function() {
          $( this ).dialog( "close" );
        },
        No: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });

  <div id="dialog-confirm" title="Genalytics">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Are you sure want to unshare?</p>
</div>

我有一个这样的输入按钮：

<input type="submit" value="Unshare" name="unshare" />

我想在用户点击按钮时弹出对话框。我该怎么做？

【问题讨论】：

标签： jquery modal-dialog

【解决方案1】：

我通过自己没有第三方插件创建了模型弹出窗口。

你能试试给定的链接吗？

<input type="button" id="btnShowSimple" value="Simple Dialog" />
<input type="button" id="btnShowModal" value="Modal Dialog" />

See Demo

希望它喜欢你。

【讨论】：

干得好。我喜欢这个例子。

【解决方案2】：

您需要在提交按钮所在的表单中使用提交事件。

$(function() {
    var submit = false;
    $("#dialog-confirm").dialog({
      resizable: false,
      height:190,
      autoOpen: false,
      width: 330,
      modal: true,
      buttons: {
        "Yes": function() {
          $(this).dialog("close");
          submit = true;
        },
        No: function() {
          $(this).dialog("close");
        }
      }
    });

    $('form').submit(function() {
        if (!submit) {
            $("#dialog-confirm").dialog('open');
            return false;
        }
    });
});

【讨论】：

这样做了，但是页面底部的文本显示为这样的对话框“您确定要取消共享吗？”当我点击按钮时，不会显示弹出窗口。
@user2032220 您可以使用autoOpen: false 在事件外部创建对话框，并在事件内部使用dialog('open');。
请更新您的答案，我会将您的答案标记为最佳答案。谢谢
我在 div 中有按钮：

有关系吗？
@user2032220 onclick 事件在提交时不起作用，您需要在表单上使用提交功能。或 onsubmit 属性，如果您需要在 html 中放置一个函数。