The other day I was working on adding bootstrap to a site to help it become responsive. The site also employed jQuery-ui. For other reasons, it was best to load the bootstrap js after the jQuery-ui js. Because of the order of js loading, it ended up causing an issue with the jQuery-ui dialog() element.  It would cause the “x” close icon button to not load correctly.

After browsing some resources, I found a simple solution.  Use the following bit of code in your document.ready() and it fixes the issue:

$(document).ready(function(){
     var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
     $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
});

I can’t claim credit for it.  You can read more at the original stackoverflow question: http://stackoverflow.com/questions/17367736/jquery-ui-dialog-missing-close-icon