How to restore the missing “x” in a JQuery UI dialog Close button

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

The image below shows the close button with no x. It’s not a fatal problem but it doesn’t signify “Close Me” to the user quite as readily as it would with the “x” on the button.

This is how it should look:

At first I thought the “x” image might be missing but all the theme pieces were in place.

The Fix

This was caused by a conflict between Bootstrap buttons and jQuery UI buttons. One possible fix is to change the order of the two scripts involved, bootstrap.min.js and jquery-ui.min.js. However, I had previously determined the best order for all the scripts used in the learning module based on other considerations, and did not want to change the order of the scripts.

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 resolve the conflict by redefining bootstrapButton back to what it should be.

Insert this after $(document).ready() :

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