我一直在使用DevExpress PopupControl。它们看起来很漂亮，但它们不会在iOS / Android设备上显示滚动条。所以我想提出一个替代方案。我的直接用途只是用于显示部分视图，只读和关闭按钮。
我对jquery并不熟悉，所以我很难将有关此主题的所有不同帖子拼凑在一起。
我的index.cshtml是一个包含许多不同局部视图的门户网站。部分视图之一是客户列表。客户端名称是客户端详细信息的链接。这是我需要弹出对话框的地方。
带有客户列表的部分视图（注意链接调用javascript函数传递我想要查看的ID：
<table style="text-align: left;">
@if ((Model != null) && (Model.Items != null))
{
foreach (WebMVC.Models.VisitDetails p in Model.Items)
{
sTime = p.StartTime.ToString("MM/dd") + " " + p.StartTime.ToShortTimeString().PadLeft(8,'_') + " - " + p.EndTime.ToShortTimeString().PadLeft(8,'_');
<tr>
<td style="width: auto">
@Html.DevExpress().HyperLink(
settings =>
{
settings.Name = "indexHyperLinkClient" + p.VisitID.ToString();
settings.Properties.Text = @p.NameNumZone;
settings.Properties.ClientSideEvents.Click =
string.Format("function(s, e) {{ MethodClient('{0}'); }}", p.Account);
}
).GetHtml()
</td>
</tr>
}
}
</table>
index.cshtml中处理弹出窗口的当前javascript：
<script type="text/javascript">
var _clientId;
function MethodClient(clientid) {
_clientId = clientid;
popClient.PerformCallback();
popClient.Show();
}
function OnBeginCallbackClient(s, e) {
e.customArgs["clientid"] = _clientId;
}
<script type="text/javascript">
popClient是我要替换的当前对话框。无论内容大小如何，我都希望对话框具有特定的高度。
要在对话框中显示的局部视图示例：
@model WebMVC.Models.ClientDetail
@{
DateTime now = DateTime.Today;
int age = now.Year - Model.Birthdate.Year;
if (Model.Birthdate > now.AddYears(-age))
{
age--;
}
string sBirthdate = Model.Birthdate.ToShortDateString() + " (Age: " + age + ")";
}
<div id="contentDiv">
<span class="display-label">@Html.DisplayNameFor(model => model.NameNumZone):</span>
<span class="display-field">@Html.DisplayFor(model => model.NameNumZone)</span>
<br />
<span class="display-label">@Html.DisplayNameFor(model => model.Sex):</span>
<span class="display-field">@Html.DisplayFor(model => model.Sex)</span>
<br />
<span class="display-label">@Html.DisplayNameFor(model => model.Birthdate):</span>
<span class="display-field">@Html.DisplayFor(model => @sBirthdate)</span>
<br />
<span class="display-label">@Html.DisplayNameFor(model => model.Address):</span>
<span class="display-field">@Html.DisplayFor(model => model.Address)</span>
<br />
</div>
控制器：
public ActionResult Details()
{
string id = "";
if (!string.IsNullOrEmpty(Request.Params["clientid"]))
id = Request.Params["clientid"];
int clientid = 0;
if (id != "")
clientid = Convert.ToInt32(id);
ClientDetail cl;
if (clientid != 0)
ClientDetail cl = GetClientDetails(clientid);
else
ClientDetail cl = new ClientDetail();
return PartialView("ClientPopupPartial", cl);
}
我可以有一个弹出窗口并渲染不同的局部视图（可能通过向方法客户端调用添加一个硬编码的参数，例如area = 1，area = 2）吗？或者每个细节区域都应该有一个弹出窗口（客户端，访问，方向......）。
答案 0 :(得分：11)
静态对话框（无AJAX）的示例
在局部视图中为对话框内容定义div：
@model ClientDetail
<h2>Client Detail</h2>
@Html.DisplayFor(m => m.NameNumZone)
@Html.DisplayFor(m => m.Birthdate)
...
对话框触发器和局部视图：
<a href="#" class="dialog-trigger" data-clientId="@p.Account">@p.NameNumZone</a>
<div id="client-detail-modal">
@Html.Partial("ClientDetail", Model.Item)
</div>
使用Javascript：
$(document).ready(function() {
// setup the dialog
$("#client-detail-modal").dialog({
modal: true,
autoOpen: false,
height: 100,
width: 200
});
// bind the click event
$(".dialog-trigger").on("click", function(event) {
event.preventDefault();
$("#client-detail-modal").dialog("open"); // show dialog
});
});
现在，如果页面上有多个客户端，则每个客户端都需要一个对话框。在几个客户之后，它变得丑陋。而是动态填充对话框内容。
动态对话框内容（AJAX）
您的partial的对话框容器最初为空：
<div id="client-detail-modal"><!-- Client Partial, empty for now --></div>
通过AJAX获取部分：
$(".dialog-trigger").on("click", function(event) {
event.preventDefault();
var clientId = $(this).data("clientId");
$.ajax({
url: "Client/Details/" + clientId,
type: "GET",
})
.done(function(result) {
$("#client-detail-modal").html(result).dialog("open");
});
});
动态内容（无AJAX）
填充对话框的另一种方法是填充触发元素的data属性，然后使用javascript替换内容。
<a href="#" class="dialog-trigger"
data-clientId="@p.Account"
data-birthdate="@p.Birthdate">@p.NameNumZone</a>
$(".dialog-trigger").on("click", function(event) {
var clientId = $(this).data("clientId");
var birthdate = $(this).data("birthdate");
// now replace content with new values
$("span.birthdate").text(birthdate);
});
答案 1 :(得分：0)
将此内容放入样式表
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 80%;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
并在代码中使用以下
<a href="#openModal" target="">Open Modal</a>
<div id="openModal" class="modalDialog" data-theme="c">
<div>
<a href="#close" title="Close" class="close" target="">X</a>
<h2>Pop up</h2>
<p>Pop up content. You can add your controls and content here</p>
</div>
</div>
这个逻辑对我有用。希望它也适合你。
不是使用<a href="#close" title="Close" class="close" target="">X</a>来关闭它，而是首选导航到某个父页面。