C#+JS 弹出详细信息遮罩层（适合Repeater DataList GridView）

效果图：

HTML代码：

<div id="show">
            <table class="TableFrame" cellspacing="0" style="display: block; width: 600px">
                <tr>
                    <td class="leftstyle" style="border-top: 1px solid #9A9997;width:80px">库位：</td>
                    <td style="border-top: 1px solid #9A9997; text-align: left; width: 330px; border-right: 0;">
                        <input type="text" id="txtUpLoaction" runat="server" readonly="readonly" />
                    </td>
                    <td style="width: 150px; border-top: 1px solid #9A9997;"></td>
                </tr>
                <tr>
                    <td class="leftstyle">工厂名称：</td>
                    <td style="text-align: left; border-right: 0;">
                        <input type="text" id="txtUpLotatt09" runat="server" />
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td class="leftstyle">品番：</td>
                    <td style="text-align: left; border-right: 0;">
                        <input type="text" id="txtUpLotatt04" runat="server" style="width: 300px;" />
                        <br /> 输入规范:可输入多个中间以逗号隔开例如:436027,629S-826
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td class="leftstyle">箱号：</td>
                    <td style="text-align: left; border-right: 0;line-height:20px;">
                        <input type="text" id="txtUpLotatt10" οnblur="GetBoxNumber();" runat="server" style="width: 200px;" />
                        <br />单个品番时的箱号格式如:1-4,11,<br />22,33两个品番以及超过两个时的箱号格式如15-19,44;4
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td class="leftstyle">箱数：</td>
                    <td style="text-align: left; border-right: 0;">
                        <input type="text" id="txtUpBoxNumber" readonly="readonly" runat="server" /></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="leftstyle">入库日期：</td>
                    <td style="text-align: left; border-right: 0;">
                        <input type="text" id="txtUpAddTime" runat="server" class="Wdate"
                            readonly="readonly"
                            οnclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" /></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="leftstyle">跟踪号：</td>
                    <td style="text-align: left; border-right: 0;">
                        <input type="text" id="txtUpTraceID" runat="server" readonly="readonly" /></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="leftstyle">产品等级：</td>
                    <td style="text-align: left; border-right: 0;">
                        <asp:RadioButtonList ID="cblRate" runat="server" RepeatDirection="Horizontal" Height="30px">
                            <asp:ListItem>A品</asp:ListItem>
                            <asp:ListItem>半成品</asp:ListItem>
                            <asp:ListItem>直出 </asp:ListItem>
                        </asp:RadioButtonList></td>
                    <td></td>
             </tr>
                <tr>
                    <td class="leftstyle" colspan="3">
                        <asp:Button runat="server" ID="lbEdit" OnClientClick="ValidateStock();" Style="cursor: pointer; height: 25px; width: 60px;"
                            OnClick="lbEdit_Click"  Text="编辑" />
                        <asp:Button runat="server" ID="lbtUpdate" OnClientClick="ValidateStock();" Style="cursor: pointer; height: 25px; width: 60px;"
                             Text="修改"  OnClick="lbtUpdate_Click"/>
                        <input type="button" οnclick="javascript:HideUpdateDiv();" style="cursor: pointer; height: 25px; width: 60px;" value="取消" />
 
                    </td>
                </tr>
            </table>
        </div>

C#代码：

protected void rpStockManager_ItemDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
          HyperLink edit = e.Item.FindControl("hlEdit") as HyperLink;
//要传递的值组合起来。
string parmValue = rowv["LocationID"].ToString() + "_" + rowv["LotAtt09"].ToString() + "_" +
                rowv["LotAtt04"].ToString() + "_" + rowv["LotAtt10"].ToString() + "_" + rowv["BoxNumber"].ToString() + "_" + addTime + "_" + traceNO + "_" + rowv["LotAtt05"].ToString();
                edit.Attributes.Add("onclick", "javascript:ShowUpdateDiv('" + parmValue + "');");
edit.Attributes.Add("onclick", "javascript:ShowUpdateDiv('" + parmValue + "');");
        }
          
    }

JS代码：

//编辑显示Div
function ShowUpdateDiv(strUpdateInfo) {
    $("#black_overlay").css("display", "block");
    $("#show").css("display", "block");
    $("#txtUpLoaction").val(strUpdateInfo.split('_')[0]);
    $("#txtUpLotatt09").val(strUpdateInfo.split('_')[1]);
    $("#txtUpLotatt04").val(strUpdateInfo.split('_')[2]);
    $("#txtUpLotatt10").val(strUpdateInfo.split('_')[3].replace(/[A-Za-z]/g, ''));
    $("#txtUpBoxNumber").val(strUpdateInfo.split('_')[4]);
    $("#txtUpAddTime").val(strUpdateInfo.split('_')[5]);
    $("#txtUpTraceID").val(strUpdateInfo.split('_')[6]);
    $("input[name='cblRate'][value='" + strUpdateInfo.split('_')[7] + "']").attr("checked", true);
    //根据点击的状态隐藏button
    if ($("#txtUpLotatt09").val() == "")//alert('编辑');
    {
        $("#lbtUpdate").hide();
        $("#lbEdit").show();
    }
    else//    alert('修改');
    {
        $("#lbEdit").hide();
        $("#lbtUpdate").show();
    }
    $("#updateLotAtt10").attr("value", strUpdateInfo.split('_')[2]);
}

CSS代码：

/*编辑信息css*/
#show {
	display: none;
	position: absolute;
	top: 20%;
	left: 15%;
	width: 60%;
	height: 65%;
	padding: 8px;
	border: 8px solid #fbb639;
	background-color: white;
	z-index: 1003;
	overflow: auto;
	line-height: 30px;
}

	#show input {
		border: 1px solid #808080;
		height: 20px;
	}

		#show input:focus {
			border: 1px dotted black;
		}

		#show input.error {
			border: 1px dotted red;
		}

em.error {
	color: red;
}
/*产品等级*/
#cblRate td {
	border: none;
}

	#cblRate td input {
		border: none;
		padding-top: 5px;
	}

		#cblRate td input:focus {
			border: none;
		}

/*不显示详细新*/
.noDisplay {
	display: none;
}

.showDisplay {
	display: block;
}