Question

如何创建无边框jQuery UI对话框，但保持关闭按钮并使Button变为紫色？默认关闭按钮位于右上角。

Answer 1

这是一个链接 Theming the Dialog Box in jQuery UI

- 或更具体地说 -

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

http://jsfiddle.net/AS4mu/

Answer 2

演示： http://so.devilmaycode.it/borderless-jquery-dialog-keeping-the-close-button

在默认的ui css放置你的css之后，顺便看看里面的演示源代码。

            /* 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);
    }

无边框JQuery对话保持关闭按钮

2 个答案: