I am currently implementing a modal in my application. However, I am facing an issue where the modal title is displaying html tags instead of rendering them properly. https://i.sstatic.net/nUXPt.png
Upon inspection, it seems that the dialog title is not being rendered correctly and is showing html tags. Here is the html code for the dialog:
<div id="dialog_simple" title="Dialog Simple Title">
<p>
Dialog part is working as expected.
</p>
</div>
Additionally, here is the relevant javascript code used to open the modal:
$('#dialog_link').click(function() {
$('#dialog_simple').dialog('open');
return false;
});
$('#dialog_simple').dialog({
autoOpen : false,
width : 600,
resizable : false,
modal : true,
title : "<div class='widget-header'><h4><i class='fa fa-warning'></i> Empty the recycle bin?</h4></div>",
buttons : [{
html : "<i class='fa fa-trash-o'></i> Delete all items",
"class" : "btn btn-danger",
click : function() {
$(this).dialog("close");
}
}, {
html : "<i class='fa fa-times'></i> Cancel",
"class" : "btn btn-default",
click : function() {
$(this).dialog("close");
}
}]
});
})
Is there something that I might be overlooking in this setup? Any assistance would be greatly appreciated.