没有标题栏的jQuery对话关闭答案

【问题标题】：jquery dialogue close without titlebar没有标题栏的jQuery对话关闭
【发布时间】：2014-02-27 21:04:56
【问题描述】：

我有这个对话框，我想删除标题栏，因为它看起来很丑，唯一的问题是标题栏包含我需要的关闭按钮。要查看我正在谈论的示例，您可以在此处查看：

kitchenova.com

这是我的代码：

<script type="text/javascript">
$(document).ready(function(){
    if(localStorage.getItem("firstTime")==null){
        $( "body" ).prepend( "<div class='dialog-wrapper'></div>" );
        $("#dialog").show(); 
        $(".ui-dialog-titlebar").hide();
        $("#dialog").dialog(
        {
            width:600,
            height:319,
            zIndex: 99999
        });

        $("#dialog").dialog('open');
        localStorage.setItem("firstTime","done");
    }

    $('.ui-dialog-titlebar-close').click(function(){
        $('.dialog-wrapper').remove();
    });
});
</script>

是的，我查看了对话框小部件文档，但似乎无法理解它，因为我对 jquery 不太熟悉。或者，也许您可以通过单击对话框外部来帮助我关闭对话框。这就是我想要的样子。

【问题讨论】：

标签： javascript jquery jquery-ui dialog

【解决方案1】：

您可以创建一个按钮来关闭对话框并使用以下代码获取它：

 $("#dialog").dialog('close');

【讨论】：

【解决方案2】：

你只需要在初始化对象中添加一个关闭按钮：

$("#dialog-confirm").dialog({
    resizable: false,
    modal: true,
    width:600,
    height:319,
    buttons: {
        "Close": function () {
            $(this).dialog("close");
        }
    }
});

您可以使用 css 代替 JavaScript 来隐藏标题栏：

.ui-dialog-titlebar { display:none; }

这是一个有效的 JSFiddle：http://jsfiddle.net/Z9wZL/

【讨论】：

如何制作按钮？
按钮被添加到您在上面看到的初始化对象中：..., buttons: {... 该块是将按钮添加到对话框的部分。
我明白了，是的，我让它工作了，但仍然不是我想要的，就美学而言，它看起来很丑。不管怎么说，还是要谢谢你。我添加了图片来说明我正在尝试做的事情。