Question

我试图使用JQuery对话框进行删除确认，但我似乎无法让它显示在所有内容之前，以便在关闭之前阻止与其他控件的交互。

以下是我的代码：

<script>
function deleteItem(id) {

    $('body').append('<div id="confirm" title="Confirm Delete">' +
    '<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' +
    'The item will be deleted. Are you sure?</p></div>');

    $(function() {
        $('#confirm').dialog({
            resizable: false,
            height: 185,
            modal: true,
            show: {
                effect: 'slide',
                duration: 200
            },
            hide: {
                effect: 'slide',
                duration: 200
            },
            buttons: {
                'Delete': function() {
                    //Deletion code
                    $(this).dialog('close');
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        });
    });
};
</script>

请帮忙。谢谢。

Answer 1

相应地改变。

modal:false - 将对话框作为正常警报。

modal:true - 它会在页面前面显示对话框。

请参阅此示例。 Demo

   $('<div></div>').appendTo('body')
        .html('<div><h6>Yes or No?</h6></div>')
        .dialog({
        modal: true,
        title: 'message',
        zIndex: 10000,
        autoOpen: true,
        width: 'auto',
        resizable: false,
        buttons: {
            Yes: function () {
                item.remove();
                $(this).dialog("close");
            },
            No: function () {
                $(this).dialog("close");
            }
        },
        close: function (event, ui) {
            $(this).remove();
        }
    });

更新

确定。所以你最后需要这个。

.ui-widget-overlay {
   background: #AAA url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
   opacity: 2;
   filter: Alpha(Opacity=30);
}

将JQuery Dialog带到前面

1 个答案: