Close a dialog by clicking a button - JQuery UI

Question

I am trying to create a button that closes the dialog box in the jQuery user interface.

To open the dialog, I use this code:

$(".show .edit_site").click(function (){ rel = $(this).attr("rel"); $("#dialog_edit").dialog({ modal: true, open: function () { $(this).load("<?= site_url()?>/sites/show_update?id="+rel+"&mode=popup"); }, close: function() { //some code }, height: 370, width: 900, title: 'Some title' }); }); 

The dialogue is open and everything is in order. But now the question is, how to close the dialog box by clicking the button inside the dialog box?

Thanks everyone and sorry for my scary english :)

---

I tried all possible solutions, this is the only one that works for me:

 function close_dialog() { //Close jQuery UI dialog $(".ui-dialog").hide(); $(".ui-widget-overlay").hide(); } 

Answer 1

It's simple, just add a button as part of the dialog options:

 $("#dialog_edit").dialog({ modal: true, open: function () { $(this).load("<?= site_url()?>/sites/show_update?id="+rel+"&mode=popup"); }, height: 370, width: 900, title: 'Some title', buttons: { 'button text' : function() { $(this).dialog('close'); } } }); 

Answer 2

You can use the close> method:

 $("#dialog_edit").on('click', '#closeButtonId', function(){ $(this).closest("#dialog_edit").dialog('close'); }); 

Answer 3

I tried the code below and it worked

  $('#btnClose').click(function () { window.parent.jQuery('#msgbox').dialog('close'); });