javascript - 模态弹出窗口在 jquery 中不起作用

Question

我的表单中有一个提交按钮 例如:

<div>
<form method = 'POST' action="#">
<input type="submit" class="btn btn-success myDialog" value="buy now"/>
</form>
</div>

我需要在 submit 时显示弹出对话框事件被引发。我尝试过这样的事情

在 html

<div class="dialog">hello dialog box</div>

在 .js文件

$( ".myDialog" ).click(function() {
   alert();// alert is working
  $( ".dialog" ).dialog({
  autoOpen: false,
  show: {
    effect: "blind",
    },
  hide: {
    effect: "explode",
       }
   });
});

对我来说，即使我尝试了上面的代码也不起作用 dialog("open")但没有用，任何人都可以帮助我。

Answer 1

您需要设置autoOpen to true :

  $(".dialog").dialog({
    autoOpen: true, // <-- set to true, which is default
    show: {
      ...
    ...
  });

您还应该将按钮上的单击事件更改为表单上的提交事件:

$(".myDialog").closest("form").on("submit", function() {
  $(".dialog").dialog({
    show: {
      effect: "blind",
    },
    hide: {
      effect: "explode",
    }
  });
});

您也可以稍后使用以下方式打开它:

$(".dialog").dialog("open");