Question

我对此很新，所以非常感谢任何帮助。我正在使用Simple Modal生成模态弹出，这可以正常工作。

我现在想要在元素txtEmail中添加jquery自动完成功能。当我在Simple Modal之外运行页面时，我可以使用自动完成，但是当通过Simple Modal加载页面时，它不起作用。

我已经检查过以确保元素已加载，并允许我更改文本颜色，但我无法为其添加自动填充。

代码是

/**
* @author Daniel
*/
jQuery(function($) {

    $("input.ema, a.ema").click(function(e) {
        e.preventDefault();
        $("#osx-modal-content").modal({
            appendTo: 'form',
            overlayId: 'osx-overlay',
            containerId: 'osx-container',
            closeHTML: '<div class="close"><a href="#" class="simplemodal-close">X</a></div>',
            minHeight: 80,
            opacity: 65,
            position: ['0', ],
            overlayClose: true,
            onOpen: OSX.open,
            onClose: OSX.close,
            onShow: OSX.show

        });
    });

    var OSX = {
        container: null,
        open: function(d) {
            var self = this;
            $.ajax({
                url: "/Message/UserMessage/",
                type: 'GET',
                dataType: 'html', // <-- to expect an html response
                success: function(result) {
                    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
                    $('div#osx-modal-data').html(result).find("#txtEmail").css('color', '#c00');

                    if ($('div#osx-modal-data').find("#txtEmail").length) { // implies *not* zero
                        $('div#osx-modal-data').find("#txtEmail").autocomplete(data);
                        alert('We found img elements on the page using "img"');
                    } else {
                        alert('No txtEmail elements found');
                    }
                }
            });


            self.container = d.container[0];
            d.overlay.fadeIn('slow', function() {
                $("#osx-modal-content", self.container).show();
                $('div#osx-modal-title').html("Send Email");
                var title = $("#osx-modal-title", self.container);
                title.show();

                d.container.slideDown('slow', function() {
                    setTimeout(function() {
                        var h = $("#osx-modal-data", self.container).height() +
                        title.height() +
                        20; // padding
                        d.container.animate({
                            height: h
                        }, 200, function() {
                            $("div.close", self.container).show();
                            $("#osx-modal-data", self.container).show();

                        });
                    }, 300);
                });
            })

        },
        close: function(d) {
            var self = this;
            d.container.animate({
                top: "-" + (d.container.height() + 20)
            }, 500, function() {
                self.close(); // or $.modal.close();
            });
        },
        show: function(d) {

            // $('div#osx-modal-data').find("#txtEmail").css('color', '#ccc')
        }
    };
});

Answer 1

我找到了答案，文本框的Z索引低于SimpleModal的Z索引，因此当我增加文本框的Z索引时，它的工作原理。

ASP.NET中具有自动完成功能的简单模态

1 个答案: