Search code examples
javascripthtmlcssjquery-ui-dialog

JQuery UI Dialgo modal's title html tags is not rendered

I am currently adding modal to my application. When modal is displayed it also shows the html tags inside modal title. screen

As you see dialog title is not rendered and it shows html tags. Here it is dialog html

<div id="dialog_simple" title="Dialog Simple Title">
  <p>
   Dialog part is woring just fine.
  </p>

</div>

And here related javascript to open 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>&nbsp; Delete all items",
            "class" : "btn btn-danger",
            click : function() {
              $(this).dialog("close");
            }
          }, {
            html : "<i class='fa fa-times'></i>&nbsp; Cancel",
            "class" : "btn btn-default",
            click : function() {
              $(this).dialog("close");
            }
          }]
        });

        })

Am I missing something? Thanks in advance

Solution

  • Looks like this is not related to Bootstrap. From what I can see you are using jQuery UI Dialog (http://jqueryui.com/dialog/), right?

    The title property only accepts a string but you can overwrite the default behaviour as shown here: https://stackoverflow.com/a/14488776/3215856