I was attempting to create a dialog using AJAX to load content, but I'm struggling to remove it once created. It was essential for the dialog to be multipurpose, PHP-compatible, draggable, and closable.
(.center() function enabled)
$('a.event').click(function() {
var url = this.href;
var getrel = $(this).attr('rel');
var getid = $(this).attr('id');
var dialog = $('<div id="event_'+getid+'" class="izModal '+getrel+'"></div>').appendTo('body');
dialog.load( url, {}, function (responseText, textStatus, XMLHttpRequest) { $('#event_'+getid+'').append("<a class='close' rel='"+getid+"'>x</a>"); } ).center().draggable();
return false;
});
To close the dialog:
$('a.close').click(function(event){
var getevent = $(this).attr('rel');
$('#event_'+getevent+'').hide();
});
I've attempted various methods, including assigning unique IDs to each dialog for closing purposes, utilizing this.parent, hide(), adjusting CSS, and using remove().
If anyone can identify the issue, I would greatly appreciate it. Thanks in advance.