popup close icon click event custom

Question

Jquery popup close icon click event is not working?

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!');
});

Your question isn't very clear, and your fiddle is broken. Could you please edit the question to give a clear description of the problem and what you want to achieve. — Rory McCrossan, Sep 24 '18 at 10:55
BTW you are missing a closing quotes for your selector => `find('span.ui-icon-closethick')` — Hrishikesh, Sep 24 '18 at 10:57
@RoryMcCrossan: Can you write click event for popup close icon like this:$('#myDialog').prev('div').find('a').find('span.ui-icon-closethick).click (function()..... — Kanaka k, Sep 24 '18 at 11:02
Possible duplicate of https://stackoverflow.com/questions/171928/jquery-ui-dialog-how-to-hook-into-dialog-close-event — Aditya Sharma, Sep 24 '18 at 11:13
Not duplicate...Please understand...I want to use only that popup id and inside attr or class — Kanaka k, Sep 24 '18 at 11:16

Shahaji Deshmukh · Answer 1 · 2018-09-24T11:48:21.130

0

You can set z-index for below divs. So that close event will be called on close button.

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

You can use beforeClose property of the dialog box:

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

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

edited Sep 24 '18 at 11:48

answered Sep 24 '18 at 11:08

Shahaji Deshmukh

646
4
7

Script changed...How to call function after click the close icon? – Kanaka k Sep 24 '18 at 11:10
For what? Assumption. You mean you want to call function() before closing the dialog box. – Shahaji Deshmukh Sep 24 '18 at 11:15
Yes...using popup id and parent elements..pls inspect the close icon and see in the element structure – Kanaka k Sep 24 '18 at 11:22
I think you can check https://stackoverflow.com/questions/171928/jquery-ui-dialog-how-to-hook-into-dialog-close-event – Shahaji Deshmukh Sep 24 '18 at 11:32
this script is not working?$(document).on('click', '#myDialog .ui-dialog-titlebar-close', function(e) { e.preventDefault() alert('you clicked the x!'); }); – Kanaka k Sep 24 '18 at 11:36
Please use popup id and close button class name – Kanaka k Sep 24 '18 at 11:55

Damian Peralta · Answer 2 · 2018-09-24T14:29:56.620

I don't know how to modify the behaviour of the default close button. But a workaround is hiding that button and adding a new one:

$("#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>

In this way you can have a button, but in a different position. You can play with css to move it if you like. Anyway, I don't understand why you want a dialog that doesn't close....

Can you use html elements? using id and parent element with class — Kanaka k, Sep 24 '18 at 11:22
I want to over write default click event for close icon..after I clicked only my alert will come. — Kanaka k, Sep 24 '18 at 11:28
Can you use like this: $('#myDialog').parent('div').find('button.uidialog-titlebar-close').click( function () { test(); }); — Kanaka k, Sep 24 '18 at 11:30

popup close icon click event custom

2 Answers2