使用 SimpleModal 和 ASP.NET MVC
我正在使用 Simple Modal 和 asp.net MVC。我已经使用 OSX 演示进行了设置，它将视图加载到对话框中。
我使用的javascript是：
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: doSubmitSuccess
});
function doSubmitSuccess(result) {
$('div#osx-modal-data').html(result);
}
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) {
var self = this;
$("#txtEmail", self.container).hide();
});
}
};
});
在显示功能上，我试图隐藏txtEmail框，但它似乎无法找到它。
进入对话框的 HTML 是
<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CreateMessage</title>
</head>
<body>
<div>
<p>
<input id="txtEmail" type="text" style="width: 90%" /></p>
<p>
<textarea id="TextArea1" cols="20" rows="5"></textarea></p>
<p>
<input id="submitmsg" type="submit" value="Send" /></p>
</div>
</body>
</html>
谁能帮我解决这个问题吗？
谢谢，
I am using Simple Modal with asp.net MVC. I have set it up using the OSX demo, which loads a view into the dialog.
The javascript I am using is:
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: doSubmitSuccess
});
function doSubmitSuccess(result) {
$('div#osx-modal-data').html(result);
}
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) {
var self = this;
$("#txtEmail", self.container).hide();
});
}
};
});
On the show function I am trying to hide the txtEmail box, but it doesnt seem to be able to find it.
The HTML which is going into the dialog is
<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CreateMessage</title>
</head>
<body>
<div>
<p>
<input id="txtEmail" type="text" style="width: 90%" /></p>
<p>
<textarea id="TextArea1" cols="20" rows="5"></textarea></p>
<p>
<input id="submitmsg" type="submit" value="Send" /></p>
</div>
</body>
</html>
Can anyone help me out on this?
Thanks,
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我相信在调用
show方法时 AJAX 调用尚未完成，因此该元素在您要隐藏它时并不存在。您可能应该将open处理程序中 ajax 调用之后的所有代码以及隐藏txtEmail元素的代码移至 ajax 回调中。I believe that the AJAX call hasn't completed by the time the
showmethod is invoked and thus the element doesn't exist at the time that you are going to hide it. You should probably move all of the code following the ajax call in theopenhandler into the ajax callback, along with the code to hide thetxtEmailelement.