jQuery UI Dialog – missing close icon

I am late to this one by a while, but I’m going to blow your mind, ready?

The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in.

Literally, swap the two so that instead of:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://stackoverflow.com/questions/17367736/js/bootstrap.min.js"></script>

it becomes

<script src="https://stackoverflow.com/questions/17367736/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

🙂

Edit – 26/06/2015 – this keeps attracting interest months later so I
thought it was worth an edit. I actually really like the noConflict
solution offered in the comment underneath this answer and clarified
by user Pretty Cool as a separate answer. As some have reported issues
with the bootstrap tooltip when the scripts are swapped. I didn’t
experience that issue however because I downloaded jquery UI without
the tooltip as I didn’t need it because bootstrap. So this issue never
came up for me.

Edit – 22/07/2015 – Don’t confuse jquery-ui with jquery! While
Bootstrap’s JavaScript requires jQuery to be loaded before, it doesn’t rely on jQuery-UI. So jquery-ui.js can be loaded after bootstrap.min.js, while jquery.js always needs to be loaded before Bootstrap.