javascript - 隐藏在 Bootstrap 表后面的 jQuery 对话框

Question

得到一个显示数据的表单。当您单击表单字段时，会打开一个 jQuery 对话框来编辑值。但是对话在 table 后面迷路了。不确定如何更正此问题。

这是一些代码。表格代码

<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">

链接打开对话框

<td><a href="javascript:void" onclick="OpenDialog('/LabJobs/Create/@id')">Create Lab Job</a></td>

对话框部分

<div id="dialog" title="" style="overflow: hidden;"></div>

JavaScript

function OpenDialog(urlAction) {
            $('#dialog').dialog({
                autoOpen: false,
                width: 400,
                resizable: false,
                modal: true,
                closeOnEscape: true,
                draggable: true,
                resizable: true,
                title: "PTP Popup",
                open: function (event, ui) {
                    $(this).load(urlAction);
                },
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                }
            });
            $('#dialog').dialog('open');
        }

以及问题截图

Answer 1

我能够通过在 Bootstrap 后加载的 css 文件中将 .ui-dialog 类的 z-index 属性设置为 1000 来更正它。有效地覆盖它。

.ui-dialog {z-index:1000;}