CODEWITHSUNDEEP
jqueryjquery-ui
Greg Finzer
Greg Finzer

Reputation: 7054

Borderless JQuery Dialog Keeping the Close Button

How do I create a borderless jQuery UI dialog but keep the Close Button and make the Button purple? The default close button is at the top right.

Upvotes: 0

Views: 1691

Answers (2)

Luca Filosofi
Luca Filosofi

Reputation: 31173

after the default ui css place your css like this, btw look inside the demo source code.

            /* DIALOG MAIN CONTAINER */
    .ui-dialog.ui-widget-content {
        border:none;    
    }
            /* STYLE AROUND THE CLOSE (X) BUTTON */
    .ui-dialog-titlebar-close.ui-state-default, 
    .ui-dialog-titlebar-close.ui-state-hover {
        outline:none;
        background: none;
        border:none;
    }
            /* DIALOG TITLE BAR */
    .ui-dialog .ui-widget-header {
        border:0;
        background:none
    }
            /* CLOSE ICON BACKGROUND IMAGE */
    .ui-icon,
    .ui-widget-content .ui-icon {
        background-image: url(http://code.jquery.com/ui/1.10.4/themes/eggplant/images/ui-icons_ffffff_256x240.png);
    }
    .ui-widget-header .ui-icon {
        background-image: url(http://code.jquery.com/ui/1.10.4/themes/eggplant/images/ui-icons_a8a3ae_256x240.png);
    }
    .ui-state-highlight .ui-icon,
    .ui-state-default .ui-icon {
        background-image: url(http://code.jquery.com/ui/1.10.4/themes/eggplant/images/ui-icons_8d78a5_256x240.png);
    }
    .ui-state-hover .ui-icon,
    .ui-state-focus .ui-icon {
        background-image: url(http://code.jquery.com/ui/1.10.4/themes/eggplant/images/ui-icons_734d99_256x240.png);
    }
    .ui-state-active .ui-icon {
        background-image: url(http://code.jquery.com/ui/1.10.4/themes/eggplant/images/ui-icons_454545_256x240.png);
    }
    .ui-state-error .ui-icon,
    .ui-state-error-text .ui-icon {
        background-image: url(http://code.jquery.com/ui/1.10.4/themes/eggplant/images/ui-icons_ebccce_256x240.png);
    }

Upvotes: 1

Clayton
Clayton

Reputation: 444

Here is a link for Theming the Dialog Box in jQuery UI

-or more specifically-

.ui-dialog {
    border:none;
}
.ui-dialog-titlebar-close {
    background-color:purple;
}

http://jsfiddle.net/AS4mu/

Upvotes: 1

Related Questions