Question

jQuery弹出窗口关闭图标的点击事件不起作用？

JS：

user1: No such user
user30 Success: User exists in the Group 
user81 Success: User exists in the Group

Answer 1

您可以为以下div设置z-index。这样关闭事件将在关闭按钮上调用。

.ui-front{
   z-index: 1;
}
#myDialog{
   z-index: 2;
}

您可以使用对话框的beforeClose属性：

$("#myDialog").dialog({
    autoOpen  : false,
    modal     : true,
    title     : "A Dialog Box",
    beforeClose: function () {
        customFunction();
    }
});

function customFunction() {
    alert('Custom function called');
}

Answer 2

我不知道如何修改默认关闭按钮的行为。但是一种解决方法是隐藏该按钮并添加一个新按钮：

$("#myDialog").dialog({
    dialogClass: "no-close",   // Add a class to hide default close button
    buttons: [    //Add your own button
      {
        text: "New button",
        click: function() {    //Add your own click event
          test();
        }
      }
    ],
    autoOpen: false,
    modal: true,
    title: "A Dialog Box"
});

//Open the dialog box when the button is clicked.
$('#clickMe').click(function () {
    $("#myDialog").dialog("open");
});


function test() {
    alert("close icon clicked");
    //Some function script...............
}

/* Hide default button */
.no-close .ui-dialog-titlebar-close {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="myDialog">
    This is the content of my modal dialog box
    <input type="text" id="myTextBox" />
</div>

<button id="clickMe">Click Me</button>

这样，您可以有一个按钮，但位置不同。如果愿意，可以玩CSS移动它。无论如何，我不明白为什么您想要一个不会关闭的对话框。...

弹出窗口关闭图标点击事件自定义

2 个答案: