MVC3中的弹出框
MVC3中的弹出框
提问于 2011-12-06 13:18:54
嘿，frenz在我的MVC3项目中，我需要一个弹出框。实际上，当用户点击编辑按钮时，我需要将编辑视图页面显示为弹出框并将编辑后的数据保存到数据库中。
简单地说，我需要用编辑弹出框替换编辑视图页面。我知道我需要使用ajax和jquery。但是让人困惑的是如何实现它。
因此，任何关于这方面的想法都将不胜感激
回答 4
Stack Overflow用户
发布于 2011-12-06 14:31:57
我也遇到过这种情况，我更喜欢一些样式表，而不是使用任何第三方控件。我在这里编写示例代码。
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’”>here</a></p>
<div id=”light” class=”white_content”>This is the lightbox content. <a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’none’;document.getElementById(‘fade’).style.display=’none’”>Close</a></div>
<div id=”fade” class=”black_overlay”></div>
</body>
</html>Onclick事件，您需要在div中显示用户控件。为此，我使用了json对象。Javascript代码是这样的。
function ShowPopups(cntrlId, controllerName, actionName, className, id) {
var url = controllerName + "/" + cntrlId;
elementId = id;
$.ajax(
{
type: "POST",
url: "/" + controllerName + "/" + actionName,
data: "Display=" + cntrlId,
dataType: "html",
success: function (result) {
removeClass('light1');
changeClass('light1', className);
document.getElementById('light1').style.display = 'block';
document.getElementById('fade1').style.display = 'block'
$("#light1").html(result);
}
});
}
function HidePopup() {
var url = document.location.hash;
document.getElementById('fade1').style.display = 'none';
document.getElementById('light1').style.display = 'none';
document.location.hash = url;
}
// To Add and Remove class using javascript
function removeClass(elementID) {
var element = document.getElementById(elementID);
element.className = '';
}
function changeClass(elementID, newClass) {
var element = document.getElementById(elementID);
element.className += newClass;}
Stack Overflow用户
发布于 2011-12-06 13:21:23
你可以使用JQuery模型对话框(使用模型表单)它真的很简单，下面是文档中的例子。http://jqueryui.com/demos/dialog/#modal-form
Stack Overflow用户
发布于 2011-12-06 13:29:35
我也推荐Jquery UI模型对话框你仍然想尝试其他的东西这里是Jquery模型PopUp Samples的列表
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8395665
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号