时间戳

首页 > 解决方案 > Widget z-index 修改

c# - Widget z-index 修改

问题描述

我在在平台上显示widget内部时遇到问题。目前，显示在我的.modalASP.NET MVCwidgetmodal

@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;
    }
});

阿贾克斯

$("#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，有什么想法会出错吗？

标签： c#jqueryajaxasp.net-mvcwidget

解决方案

对于任何和我有同样问题的人。

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

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

在你的style：

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

这样做的原因是因为当 amodal打开时，position设置为absolute并且它忽略了所有现有的div，通过设置z-index为9999，它实际上覆盖了周围的absolute索引（我不确定）absolute index9998

推荐阅读