The close icon(X) is not visible for Jquery dialog box

Question

I have created the jquery dialog. It does not show the close(x) button in IE, but in FF it shows correctly. Please help me to solve this issue.

Jquery Version: 1.11.1 Jquery UI version: 1.10.4

Code:

<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
    <p>Test Me.</p>
</div>

$( "#dialog" ).dialog({
                 width : 400,
              resizable : false,
        buttons: [
        {
            text: "Yes",
            click: function() {
                $( this ).dialog( "close" );
            }
        },
        {
            text: "No",
            click: function() {
                $( this ).dialog( "close" );
            }
        }
    ]
});

Answer 1

Make sure you are loading the script in correct order:

1. jQuery core library <script src="..../jquery-1.11.1.js"></script>
2. Bootstrap js (if using) <script src="/js/bootstrap.min.js"></script>
3. jQuery UI library <script src="..../jquery-ui-1.10.4.j.js"></script>