我正在尝试使用 jquery 模式对话框在单击某些内容时显示异步部分视图。很简单,而且有很多问题,但我似乎无法让它发挥作用。我已经有模态显示,但不在中心。我读过这是因为我正在填充 divafter显示对话框,因此该位置是相对于空 div,而不是填充的 div - 我已经通过显示一些静态内容证明了这一点,并且它居中良好。
所以现在,我尝试先获取部分视图,然后在 load() 回调中显示对话框,但它不起作用。我在“dialog('open')”行收到错误,因为对话框方法未定义。这是我的代码:
(P.S. 我是 javascript/jQuery 的新手,如果它很明显,很抱歉)
<script type="text/javascript">
$(function () {
$('#my-dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true
});
});
$(document).ready(function() {
$('#show-modal').click(function() {
$('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
$('#my-dialog').dialog('open');
});
return false;
});
});
</script>
<div id="my-dialog"></div>
<a href="#" id="show-modal">Click Me </a>
帮助表示感谢!
Edit我已更改代码以匹配达林的代码,并上传了一张显示问题所在的图像?
您的代码看起来不错,并且在我测试时它有效。这是我的完整测试用例:
控制器:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult MyActionOnController()
{
// TODO: You could return a PartialView here of course
return Content("<div>Hello world</div>", "text/html");
}
}
查看(~/Views/Home/Index.cshtml):
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#my-dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true
});
$('#show-modal').click(function() {
$('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
$(this).dialog('open');
});
return false;
});
});
</script>
</head>
<body>
<div id="my-dialog"></div>
<a href="#" id="show-modal">Click Me </a>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)