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

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

这里是

-或者更具体地说-

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

• 演示：

在默认的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);
    }

---

看到演示和源代码…我最终不得不创建自己的对话框，因为市场营销需要一些特定的东西。查看并单击视频。谢谢你的帮助。