将JQuery对话框置于最前面

Bring JQuery Dialog to front

本文关键字：于最 前面 对话框 JQuery      更新时间：2023-09-26

我正试图使用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>

请帮忙。非常感谢。

相应地更改。

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

modal:true-它将对话框置于页面的前面。

请参见此示例。演示

   $('<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);
}
相关文章：