Question

我在在widget平台上的modal内显示ASP.NET MVC时遇到问题。目前，widget显示在我的modal的背面。

@Html.TextBoxFor(Function(model) model.Clinic, New With {.Style = "width:300px", .id = "txtClinic"})

小部件

$.widget('custom.mcautocomplete', $.ui.autocomplete, {
    _create: function () {
        this._super();
        this.widget().menu("option", "items", "> :not(.ui-widget-header)");
    },
    _renderMenu: function (ul, items) {
        var self = this,
            thead;
        if (this.options.showHeader) {
            table = $('<div class="ui-widget-header" style="width:100%"></div>');
            $.each(this.options.columns, function (index, item) {
                table.append('<span style="padding:0 4px;float:left;width:' + item.width + ';">' + item.name + '</span>');
            });
            table.append('<div style="clear: both;"></div>');
            ul.append(table);
        }
        $.each(items, function (index, item) {
            self._renderItem(ul, item);
        });
    },
    _renderItem: function (ul, item) {
        var t = '',
            result = '';
        var term = this.term;
        $.each(this.options.columns, function (index, column) {
            var value = item[column.valueField ? column.valueField : index];
            t += '<span style="padding:0px 4px;float:left;width:' + column.width + ';height:13px;">' + value + '</span>'
        });

        var $a = '<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>';

        result = $('<li style="border-bottom: solid 1px #cccccc"></li>')
            .data('ui-autocomplete-item', item)
            .append($a)
            .appendTo(ul);

        return result;
    }
});

Ajax

$("#txtClinic").mcautocomplete({

    showHeader: true,
    columns: [{
        name: 'Code',
        width: '120px',
        valueField: 'ClinicCode'
    }, {
        name: 'Clinic Name',
        width: '370px',
        valueField: 'Clinic'
    }
    ],

    minLength: 3,
    source: function (request, response) {
        $.ajax({
            cache: false,
            url: '/User/GetClinicAllDetails',
            type: "POST",
            dataType: "json",
            data: { query: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return {
                        ClinicCode: item.ClinicCode,
                        Clinic: item.Clinic
                    }
                }));
            },
            error: function (response) {
                swal("", response.message, "error");
            }
        });
    }
});

所有代码都列在我的Modal View中，有什么想法会出错吗？

Answer 1

对于任何与我有相同问题的人。

只需将以下行添加到widget部分：

$(".ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content").addClass("zindex9999");

在您的style中：

.zindex9999{z-index:9999 !important;}

这样做的原因是，当打开modal时，position被设置为absolute，并且通过设置{{ 1}}到div，实际上是覆盖z-index索引，因为9999 absolute在absolute附近（我不确定）

小部件z-index修改

1 个答案: