弹出关闭图标点击事件自定义答案

【问题标题】：popup close icon click event custom弹出关闭图标点击事件自定义
【发布时间】：2019-02-27 20:56:39
【问题描述】：

Jquery 弹出关闭图标点击事件不起作用？

JS：

//Set up the dialog box
$("#myDialog").dialog({
autoOpen  : false,
modal     : true,
title     : "A Dialog Box" 
});

//Open the dialog box when the button is clicked.
$('#clickMe').click(function() {
$("#myDialog").dialog("open");
});

$(document).on('click', '#myDialog .ui-dialog-titlebar-close', function (e) { 
  e.preventDefault()
  alert('you clicked the x!');
});

【问题讨论】：

你的问题不是很清楚，你的小提琴坏了。您能否编辑问题以清楚地描述问题以及您想要实现的目标。
顺便说一句，您缺少选择器的右引号 => find('span.ui-icon-closethick')
@RoryMcCrossan：你能为这样的弹出关闭图标编写点击事件吗：$('#myDialog').prev('div').find('a').find('span. ui-icon-closethick).click (function().....
@RoryMcCrossan：解释清楚
你真的没有

标签： javascript jquery jquery-ui

【解决方案1】：

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

$("#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 来移动它。无论如何，我不明白你为什么想要一个不关闭的对话框......

【讨论】：

可以使用html元素吗？在类中使用 id 和父元素
我想覆盖关闭图标的默认点击事件..点击后只有我的警报会来。
你可以这样使用：$('#myDialog').parent('div').find('button.uidialog-titlebar-close').click( function () { test( ); });
编辑了我的代码，请立即检查..click 事件不起作用

【解决方案2】：

您可以为以下 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');
}

【讨论】：

脚本已更改...点击关闭图标后如何调用函数？
为了什么？假设。你的意思是你想在关闭对话框之前调用 function()。
是的...使用弹出ID和父元素..请检查关闭图标并查看元素结构
我想你可以查一下stackoverflow.com/questions/171928/…
这个脚本不工作？$(document).on('click', '#myDialog .ui-dialog-titlebar-close', function(e) { e.preventDefault() alert( '你点击了 x!'); });