[英]Simple Modal with Autocomplete in ASP.NET
I am quite new to this so any help is very much appreciated. 我对此很陌生,因此非常感谢您的帮助。 I am generating a modal pop using Simple Modal, this works ok.
我正在使用“简单模态”生成模态弹出,这可以正常工作。
I now want to add jquery autocomplete to the element txtEmail. 我现在想将jquery自动完成功能添加到元素txtEmail中。 When I run the page outside of Simple Modal I can use Autocomplete, however when the page is loaded through Simple Modal it does not work.
当我在Simple Modal之外运行页面时,可以使用“自动完成”功能,但是当页面通过Simple Modal加载时,则无法使用。
I have checked to ensure the element is loaded, and it is allowing me to change the text color, but I can not add autocomplete to it. 我已经检查确保该元素已加载,并且允许我更改文本颜色,但是无法为其添加自动完成功能。
The code is 该代码是
/**
* @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')
}
};
});
我找到了答案,文本框的Z索引比SimpleModal的低,因此当我增加文本框的Z索引时,它起作用了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.