弹出层
页面如图，点击：Choose a retailer 弹出一个类似窗口的层：
红色字体表示弹出层用到的代码
窗口的静态页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>$appParam.TitleName$</title>$appParam.CssFiles$ $appParam.AjaxProClientCode$
$appParam.JSFiles$
<style>
.centerWin{background-color: white;position: absolute; z-index:104; width:1100px;}
</style>
</head>
<body>
<form>
<table>
<tr><td colspan="2"> Enter Information</td></tr>
<tr><td>Location ID:</td><td><input type="text" id="locationid" name="locationid" />*</td></tr>
<tr><td>Store Numbre:</td><td><input type="text" id="storenum" name="storenum" /></td></tr>
<tr><td>Retailer:</td><td>
<input type="hidden" id="retailerID" value="" />
<input type="text" id="retailername" name="retailername" value=""/><a href="javascript:PopupRetailerName();">Choose a Retailer</a>*</td></tr>
<tr><td>Store Open on:</td><td><input type="text" id="storeopentime" name="storeopentime" /></td></tr>
<tr><td>Mall:</td><td><input type="text" id="name" name="name" /></td></tr>
<tr><td>Street address:</td><td><input type="text" id="address" name="address" />*</td></tr>
<tr><td>City:</td><td><input type="text" id="city" name="city" /></td>*</tr>
<tr><td>State:</td><td><input type="text" id="state" name="state" /></td>*</tr>
<tr><td>Zip/Post:</td><td><input type="text" id="zippostal" name="zippostal" />*</td></tr>
<tr><td>Distict:</td><td><input type="text" id="district" name="district" /></td></tr>
<tr><td>Manager:</td><td><input type="text" id="contact" name="contact" /></td></tr>
<tr><td>Assistant Manager:</td><td><input type="text" id="assistmanager" name="assistmanager" /></td></tr>
<tr><td>Phone:</td><td><input type="text" id="phone" name="phone" /></td></tr>
<tr><td>Fax:</td><td><input type="text" id="fax" name="fax" /></td></tr>
<tr><td>Email:</td><td><input type="text" id="email" name="email" /></td></tr>
<tr><td>Instruction:</td><td><textarea id="instruction" name="instruction"></textarea></td></tr>
<tr><td colspan=2><input type="button" id="submitBtn" value="Submit" οnclick="Addstore()" />
<input type="button" id="clearBtn" name="clearBtn" value="Clear" οnclick="clear()" />
</td></tr>
</table>
<div id="divDisable" style="display:none;position:absolute;left:0px;top:0px;width:100%;height:100%;filter:Alpha(Opacity=10);opacity:0.1;background-color:white;z-index:101; text-align:center; vertical-align:middle;">
</div>
</form>
</body>
</html>
弹出层内容页面另外建一个新模板：
<div class="popup centerWin" id="centerWin">
<h5>
<em>Retailer</em><b><img src="../images/closed-btn.png" id="winaction" /></b></h5>
<table>
<thead>
<th>
Retailer Code
</th>
<th>
Name
</th>
<th>
Address
</th>
<th>
City
</th>
<th>
State
</th>
<th>
Zip
</th>
</thead>
<tbody id="tbody">
<ad:if test="$comparenocase(RetailernameList.Count, 0)$">
<tr>
<td colspan="6" bgcolor="#ffffff" >Have no record temporary Search.</td>
</tr>
<ad:else>
<ad:foreach collection="$RetailernameList$" var="items" index="i">
<tr class="vendorR" οnclick="GetRetailer($items.ID$,'$items.Name$')">
<td>
$items.RetailerNum$
</td>
<td>
$items.Name$
</td>
<td>
$items.Address$
</td>
<td>
$items.City$
</td>
<td>
$items.Stpr$
</td>
<td>
$items.Zippostal$
</td>
</tr>
</ad:foreach>
</ad:if>
</tbody>
</table>
</div>
js文件：
function PopupRetailerName() {
$("#divDisable").css("display", "");
//读取数据
var htm = Survey.Add_Store.Get_RetailerName().value; //这是调用后台C#的方法，得获取弹出层的内容
$("body").append(htm);
var winW = $(this).width();
var winH = $(this).height();
var sroT = $(this).scrollTop();
var sroL = $(this).scrollLeft();
var objW = $("#centerWin").width();
var objH = $("#centerWin").height();
var left = (winW - objW) / 2 + sroL;
var top = (winH - objH) / 2 + sroT;
$("#centerWin").css("left", left).css("top", top).fadeIn(1000);
$(window).resize(function() {
moveWin();
}).scroll(function() {
moveWin();
});
$("#winaction").click(function(e) {
$("#centerWin").remove();
$("#divDisable").css("display", "none");
});
}
css文件主要用到popup.css：
@charset "utf-8"; /* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ padding:0px; margin:0px; } table { border-collapse:collapse; border-spacing:0px; } fieldset,img { border:0px; } body{ background:#f1f2f4; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000;} address,caption,cite,code,dfn,em,strong,th,var { font-weight:normal; font-style:normal; } dl,ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-weight:normal; font-size:100%; } q:before,q:after { content:; } abbr,acronym { border:0; } a{ color:#666; text-decoration:none;} a:hover{ color:#990000; text-decoration:underline;} .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .Popup-btn{background: url(../images/setup-btn.png) no-repeat 0px center; border:0px; width:64px; height:28px; margin-top:10px; margin-right:10px; margin-left:8px; cursor:pointer;} .popup{ margin:0px auto;width:400px;border:1px solid #999; } .popup h5{ width:100%;background:url(../images/table-th-bg.png) repeat-x left top ; border-bottom:1px solid #ccc; margin-bottom:10px; height:2em; padding-bottom:5px; line-height:2em;} .popup h5 em{ float:left;font-size:14px; font-weight:bold;font-family:Arial, Helvetica, sans-serif; text-align:center; width:370px;} .popup h5 b{ float:right; margin-top:5px; margin-right:5px;} .popup ul li{ float:left; width:100%; table-layout:fixed; word-wrap:break-word; line-height:1.5em; min-height:30px;} .popup ul li label{ width:90px; float:left; padding-right:3px; text-align:right;} .popup ul li p{ float:left; width:auto; display:block;table-layout:fixed; word-wrap:break-word;min-height:30px;} .popup ul{ padding:10px;}
.Popup2-btn{background: url(../images/setup-btn.png) no-repeat 0px center; border:0px; width:64px; height:28px; margin-top:10px; margin-right:10px; margin-left:8px; cursor:pointer;} .popup2{ margin:0px auto;width:90%;border:1px solid #a9c6db; background-color:#fff; } .popup2 h5{ width:100%;background: url(../images/table-th-bg1.jpg) repeat-x left top ; margin-bottom:10px; height:39px; padding-bottom:5px; line-height:39px;} .popup2 h5 em{ float:left;font-size:14px; font-weight:bold;font-family:Arial, Helvetica, sans-serif; text-indent:2em; width:90%;} .popup2 h5 b{ float:right; padding-right:10px; padding-top:10px;}
.f-txtC{ text-align:center;}
转载于:https://www.cnblogs.com/go-go-go/archive/2012/09/20/2695758.html