使用引导程序和javascript创建弹出窗口

这是cshtml

<a href="#" data-toggle="modal" data-target="#empmodal">
@Html.DisplayFor(model => model.FullName, new { @id = "empName" })
</a>

<div class="ui tiny modal new-employee-modal" id="empmodal">
<div class="ui placeholder">
<div class="header">
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>

这是我的js

$('a').click(function (event) {
var url = '@Url.Action("Details")' /*+ input_index*/;
$('.modal.new-employee-modal').modal({
autofocus: false,
onHidden: function () {
$('.modal.new-employee-modal').empty();
$('.modal.new-employee-modal').append(
`<div class="ui placeholder">
<div class="header">
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>`)
}
})
.modal('show');
$.get(url).done(function (a) {
$(".modal.new-employee-modal").html(a);
});

});

这是我在中的特殊视图和弹出窗口

<div class="modal-title-area">
<div class="modal-name">
@{ ViewBag.Title = "employee details";

}
</div>
<div class="modal-root-page tag-label red"></div>
</div>
<div class="modal-divider"></div>
<div class="modal-content-area">
<div class="box-title"></div>
<div class="two fields">
<div class="field">
<div class="label">@EmployeeCardRes.FirstName</div>
<div class="text">@Model.FirstName</div>
</div>
<div class="field">
<div class="label">@EmployeeCardRes.JobTitle</div>
<div class="text">@ViewBag.JobTitle</div>
</div>
</div>
<div class="two fields">
<div class="field">
<div class="label">@EmployeeCardRes.LastName</div>
<div class="text">@Model.LastName</div>
</div>
<div class="field">
<div class="label">@EmployeeCardRes.PositionCode</div>
<div class="text">@ViewBag.Position</div>
</div>
</div>
<div class="two fields">
<div class="field">
<div class="label">@EmployeeCardRes.BirthDate</div>
<div class="text">@Model.BirthDate</div>
</div>
<div class="field">
<div class="label">@EmployeeCardRes.ClassCode</div>
<div class="text">@ViewBag.Department</div>
</div>
</div>
<div class="two fields">
<div class="field">
<div class="label">@EmployeeCardRes.Gender</div>
<div class="text">@Model.Gender.EnumDisplayNameFor()</div>
</div>
<div class="field">
<div class="label">@EmployeeCardRes.MobilePhoneNo</div>
<div class="text">@Model.MobilePhoneNo</div>
</div>
</div>
<div class="two fields">
<div class="field">
<div class="label">@EmployeeCardRes.CompanyEMail</div>
<div class="text">@Model.CompanyEMail</div>
</div>
<div class="field">
<div class="label">@EmployeeCardRes.FirstEmploymentDate</div>
<div class="text">@Html.DisplayFor(model => model.FirstEmploymentDate)</div>
</div>
</div>
</div>

我试着打开弹出窗口。当我点击链接时，模态应该打开，它应该获取模型中的数据。我不确定我在看的例子中做错了什么——它几乎是这样做的。我需要转到我在javascript中给出的url，并从控制器打开一个部分视图，也就是我抛出的最后一个页面。对不起我的英语

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>popup modal</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">

<!-- Large modal -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">Large modal</button>
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Large Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Add the <code>.modal-lg</code> class on <code>.modal-dialog</code> to create this large modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>

</div>
</body>
</html>

最好插入完整的引导和模式库：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

可以使用<button></button>来代替链接或者定义CCD_ 5事件。

相关内容

最新更新

热门标签：