ASP.NET—013：實現帶控件的彈出層（彈出框）
阿新 • • 發佈：2018-02-12
btn script lock 技術分享 trac borde stat -s scroll
在頁面中用到彈出新頁面的情況比較多的，一般來說都是使用JS方法
showModalDialog("新頁面相對路徑+?
showModalDialog("新頁面相對路徑+?
參數1&參數2",window,"新頁面樣式");然後會新彈出一個模態的page頁。
而在有些時候，不過顯示一些單一的、少量的數據，或者一些簡單的操作時。
就不是必需使用新彈出頁面了。
此時，最好使用彈出層。也就是數據還是顯示在當前頁面的某個控件上，然後通過JS方法實現達到彈出的目的。
看以下的樣例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li>操作一</li>
<li>操作二</li>
<li><asp:Button ID="btnShow" runat="server" Text="操作三（彈出層）" OnClientClick="return ShowBlock();" /></li>
<li>操作四</li>
<li>操作五</li>
</ul>
</div>
<!--彈出層，-->
<div id="divNewBlock" style=" border:solid 5px;padding:10px;width:600px;z-index:1001;
position: absolute; display:none;top:50%; left:10%;margin:-50px;">
<div style="padding:3px 15px 3px 15px;text-align:left;vertical-align:middle;" >
<div>
彈出層，平時在隱藏狀態，這裏能夠放控件，載入數據。操作數據等。
</div>
<div>
<asp:Button ID="BtnOperation" runat="server" Text="操作button" OnClientClick="return Operate();"/>
<asp:Button ID="BttCancel" runat="server" Text="關閉" OnClientClick="return HideBlock();" />
</div>
</div>
</div>
</form>
</body>
<script type="text/javascript" language="javascript">
function HideBlock() {
document.getElementById("divNewBlock").style.display = "none";
return false;
}
function ShowBlock() {
var set = SetBlock();
document.getElementById("divNewBlock").style.display = "";
return false;
}
function SetBlock() {
var top = document.body.scrollTop;
var left = document.body.scrollLeft;
var height = document.body.clientHeight;
var width = document.body.clientWidth;
if (top == 0 && left == 0 && height == 0 && width == 0) {
top = document.documentElement.scrollTop;
left = document.documentElement.scrollLeft;
height = document.documentElement.clientHeight;
width = document.documentElement.clientWidth;
}
return { top: top, left: left, height: height, width: width };
}
function Operate() {
return false;
}
</script>
</html>效果例如以下:
事實上是非常easy的控制，這樣一來載入數據和操作等都在當前頁面，對於要求不是非常多的操作就方便了很多。
代碼下載：http://download.csdn.net/detail/yysyangyangyangshan/7734257ASP.NET—013：實現帶控件的彈出層（彈出框）