jquery对话关闭没有标题栏

Question

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

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不太熟悉。或者也许您可以通过在对话框外单击来帮助我关闭对话框。这就是我想要的样子。

Answer 1

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

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

Answer 2

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

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

而不是JavaScript来隐藏标题栏，你可以使用css：

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

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