标签: jquery-ui-dialog

如何在jQuery UI创建的对话框中删除关闭按钮(右上角的X)？

我正在使用jquery-ui-dialog插件

我正在寻找在某些情况下关闭对话框时刷新页面的方法.

有没有办法从对话中捕获一个关闭事件？

我知道我可以在单击关闭按钮时运行代码但不包括用户使用escape或右上角的x关闭.

我正在使用自定义jQuery 1.10.3主题.我从主题滚筒直接下载,我故意没有改变任何东西.

我创建了一个对话框,我得到一个空的灰色方块,其中关闭图标应为:

我比较了在我的页面上生成的代码:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <spanid="ui-id-2" class="ui-dialog-title">Title</span>
    <button class="ui-dialog-titlebar-close"></button>
</div>

在Dialog Demo页面上生成的代码:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
        <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
        <span class="ui-button-text">close</span>
    </button>
</div>

编辑:代码的不同部分是由jQueryUI 生成的,而不是我,所以我不能只是添加span标签而不编辑jqueryui js文件,这似乎是一个糟糕/不必要的选择,以实现正常的功能.

以下是用于生成代码部分的javascript:

this.element.dialog({
    appendTo: "#summary_container",
    title: this.title(),
    closeText: "Close",
    width: this.width,
    position: {
        my: "center top",
        at: ("center top+"+(window.innerHeight*.1)),
        collision: "none"
    },
    modal: false,
    resizable: false,
    draggable: false,
    show: "fold",
    hide: "fold", …

如何禁用jQuery UI对话框上的按钮.我似乎无法在上面链接的任何文档中找到它.

我在模态确认上有2个按钮("确认"和"取消").在某些情况下,我想禁用"确认"按钮.

我在查找具体信息和示例方面遇到了很多麻烦.我的应用程序中有许多jQuery UI对话框,附加到加载了.ajax()调用的div.它们都使用相同的设置调用:

 $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true
 });

我只想让对话框调整到加载内容的宽度.现在,宽度只保持300px(默认值),我得到一个水平滚动条.

据我所知,"autoResize"不再是对话框的选项,当我指定它时没有任何反应.

我试图不为每个对话框编写单独的函数,因此.dialog("option", "width", "500")不是一个真正的选项,因为每个对话框将具有不同的宽度.

指定width: 'auto'对话框选项只会使对话框占据浏览器窗口宽度的100%.

我有什么选择？我正在使用jQuery 1.4.1与jQuery UI 1.8rc1.看起来这应该是非常简单的事情.

编辑:我为此实施了一个kludgy解决方法,但我仍在寻找更好的解决方案.

当ajax操作失败时,我创建一个带有错误的新div,然后将其显示为对话框.当对话框关闭时,我想彻底销毁并再次移除div.我怎样才能做到这一点？我的代码目前看起来像这样:

$('<div>We failed</div>')
    .dialog(
    {
        title: 'Error',
        close: function(event, ui)
        {
            $(this).destroy().remove();
        }
    });

当我运行它时,对话框显示正确,但是当我关闭它时,对话框仍然在html中可见(使用FireBug).我在这里错过了什么？我忘记了什么？

更新:刚刚注意到我的代码在firebug控制台中给了我一个错误.

$(this).destroy不是函数

有人能帮帮我吗？

更新:如果我这样做$(this).remove(),该项目将从html中删除.但它是否完全从DOM中删除？或者我是否还需要首先调用destroy函数？

我有一个显示表单的JQuery UI对话框弹出窗口.通过选择表单上的某些选项,新选项将显示在表单中,使其变得更高.这可能导致主页面具有滚动条并且JQuery UI对话框具有滚动条的情况.这种双滚动条情况对于用户来说是难看的并且令人困惑.

如何在不显示滚动条的情况下使JQuery UI对话框增长(并可能缩小)以始终适合其内容？我希望只有主页面上的滚动条可见.

我有一个jQuery UI对话框,在单击特定元素时显示.如果点击发生在那些触发元素或对话框本身之外的任何地方,我想关闭对话框.

这是打开对话框的代码:

$(document).ready(function() {
    var $field_hint = $('<div></div>')
        .dialog({
            autoOpen: false,
            minHeight: 50,
            resizable: false,
            width: 375
        });

    $('.hint').click(function() {
        var $hint = $(this);
        $field_hint.html($hint.html());
        $field_hint.dialog('option', 'position', [162, $hint.offset().top + 25]);
        $field_hint.dialog('option', 'title', $hint.siblings('label').html());
        $field_hint.dialog('open');
    });
    /*$(document).click(function() {
        $field_hint.dialog('close');
    });*/
});

如果我取消注释最后一部分,则对话框永远不会打开.我认为这是因为打开对话框的相同点击再次关闭它.

最终工作代码
注意:这是使用jQuery外部事件插件

$(document).ready(function() {
    // dialog element to .hint
    var $field_hint = $('<div></div>')
            .dialog({
                autoOpen: false,
                minHeight: 0,
                resizable: false,
                width: 376
            })
            .bind('clickoutside', function(e) {
                $target = $(e.target);
                if (!$target.filter('.hint').length
                        && !$target.filter('.hintclickicon').length) {
                    $field_hint.dialog('close'); …

我有一个关于jquery 1.5的应用程序,对话框工作正常.虽然我有很多.live处理程序,但我将其更改为.on.为此,我必须更新jquery(现在1.8.3 jquerui 1.9.1).

现在,我得到了: Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

以下是代码:

使用Javascript

var opt = {
        autoOpen: false,
        modal: true,
        width: 550,
        height:650,
        title: 'Details'
};

$(document).ready(function() {
$("#divDialog").dialog(opt);
    $("#divDialog").dialog("open");
...    

HTML代码

<div id="divDialog">
<div id="divInDialog"></div>
</div>

知道为什么会这样吗？

我正在使用jQuery UI对话框.如果它是开放的,我想做一件事.如果关闭,我想做另一个.

我的问题是,如何检测jQuery UI对话框是否打开？