weixin_33736649 2018-12-06 04:52 采纳率: 0%
浏览 24

小部件z-index修改

I am having issue in displaying a widget inside a modal on ASP.NET MVC platform. Currently, the widget is showing at the back of my modal.

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

Widget

$.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");
            }
        });
    }
});

All the codes are listed in my Modal View, any ideas what could went wrong?

  • 写回答

1条回答 默认 最新

  • weixin_33725270 2018-12-07 00:53
    关注

    For anyone who is having the same issue as me.

    Simply add the following line to the widget portion:

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

    In your style:

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

    The reason of doing so is because when a modal is opened, the position is set to absolute and it neglect all the existing div, by setting z-index to 9999, it actually overwrites the absolute index as the absolute index is around 9998 (I'm not sure)

    评论

报告相同问题?

悬赏问题

  • ¥15 win32如何自绘编辑框的背景图片(语言-c++|操作系统-windows)
  • ¥15 微信夜间被转走了1w对,当天手机剪切板里就出现了这个乱码,有铁子可以看看是啥吗可以
  • ¥50 跑通github上的代码 深度学习 pytorch
  • ¥50 求写,批处理调用分区助手分区脚本
  • ¥15 求购HI3519AV100开发板
  • ¥15 请问1553 RT怎么测试,没有BC有方法吗
  • ¥100 业务编程如何选择学习方向和内容?
  • ¥15 wamp3.3.5安装完成后图标正常显示绿色,鼠标左右键点击图标均无反应。求解决方法。
  • ¥15 鼠标点击的这条记录了什么?
  • ¥15 在写pid调速的程序时,电机始终维持最大速度