When building a new learning module, we noticed that the “x” was missing from the jQuery UI dialog close button in the upper right corner of the title bar.

Screen Shot 2015-06-13 at 8.30.02 AM

At first I thought the “x” image might be missing but all the theme pieces were in place.
It turned out to be a conflict between Bootstrap buttons and jQuery UI buttons. One possible fix is to change the order of the two scripts involved,

Screen Shot 2015-06-13 at 8.29.07 AM

I had previously determined the best order for all the scripts used in the module based on other issues, and did not want to change the order of bootstrap.min.js and jquery-ui.min.js. Both bootstrap and recent versions jquery-ui define either $.fn.button or $.fn[name], so they conflict.

The best solution in this case was to redefine bootstrapButton back to what it should be. Insert this after $(document).ready() .

var bootstrapButton = $.fn.button.noConflict()
$.fn.bootstrapBtn = bootstrapButton;

Thanks to “Pretty Cool” on Stack Overflow for this tip.