Jquery dialogbox ‘X’ image not showing? a

asp.net-mvcjqueryjquery-ui

I am using JQuery 1.9.1 and JQuery UI 1.10.2 in asp.net MVC4 project. I have downloaded all these JS and Css from NuGet Tool. I am missing JQuery dialogbox 'X' image in the box. How to get that on the dialogbox?

enter image description here

Project folder structure like this.

Project
|
|-Content
|    |
|    |-Themes
|       |
|        |- Base
|            |
|            |-Images
|            |
|            JQuery.UI.* Files
|            ---
|            ----
|
|
|-Scripts
    |
   JQuery-1.9.1.JS All Files
   JQuery-UI-1.10.2.JS All Files

When I searched JQuery-UI-1.10.2.js, I found below code which inserting image.

this.uiDialogTitlebarClose = $("<button></button>")
            .button({
                label: this.options.closeText,
                icons: {
                    primary: "ui-icon-closethick" //This Image
                },
                text: false
            })
            .addClass("ui-dialog-titlebar-close")
            .appendTo( this.uiDialogTitlebar );
        this._on( this.uiDialogTitlebarClose, {
            click: function( event ) {
                event.preventDefault();
                this.close( event );
            }
        });

I don't know where is that image files. I have only below image files from JQuery UI.

enter image description here

Best Answer

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="/js/bootstrap.min.js"></script>

it becomes

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

source: https://stackoverflow.com/a/20457891/187025

Related Topic