昨天做项目,用到了隐藏和显示DIV,在页面加载的时候,默认隐藏,当触发一个服务器控件时,显示此DIV,然后对此操作完成后,在点击DIV上服务器控件隐藏DIV,方法很简单,可以用客户端控件,同样的道理。
下面就把代码贴出来。
第一设置CSS
<style type="text/css">
.selectName
{
margin-left: 30%;
width: 150px;
height: 150px;
margin-top: 30px;
position: absolute;
background-color: #eef6ff;
z-index: 0;
display: none;
}
</style>
第二是DIV
<!--DIV 默认隐藏-->
<div id="divBatchName" class="selectName">
<div style="height: 50px; margin-top: 20px;">
<label>
批次名称</label>
<asp:DropDownList ID="ddlSelectBatchName" runat="server" AutoPostBack="true" >
</asp:DropDownList>
</div>
<div style="margin-top: 20px">
<asp:Button ID="btnDivBatchSure" runat="server" Text="确定" CssClass="btn_bg" ToolTip="确定"
OnClientClick="divHideBatchName()" />
</div>
</div>
<!--End DIV 默认隐藏-->
第三 JS脚本
<script language="javascript" type="text/javascript">
//显示 div
function divShowBatchName() {
var showBatchName = document.getElementById("divBatchName");
showBatchName.style.display = 'block';
}
//隐藏 div
function divHideBatchName() {
var hideBatchName = document.getElementById("divBatchName");
hideBatchName.style.display = 'none';
}
</script>
触发显示DIV服务器控件
<asp:Button ID="btnGivenBatch" runat="server" Text="显示DIV" OnClientClick="divShowBatchName()" />
就这些代码 ,样式大家可以自行设计。