//显示搜索框
function showHide(id, on)
{
var more=document.getElementById(id);
more.style.display=(on ? "inline" : "none");
}
前段时间我老是用模态窗口来弹出新页面,但其实这并不是模态窗口的使用之处,毕竟它这样用有诸多不便之处,比如容易保持状态,需要新建更多的页面。它主要用于传入模态窗口的参数到父页面。
而使用div才是正道,无论是弹出对话框,还是搜索功能,凡是需要另开窗口的地方,使用层将很方便。
Code
<script language="javascript" type="text/javascript">
//显示搜索框
function showHide(id, on)
{
var more=document.getElementById(id);
more.style.display=(on ? "inline" : "none");
}
</script>
--------------------------------------------
<input id="Image2" onclick="showHide('search', true); return false;" type="image" alt="搜索"
src="../images/ss05.gif" border="0" name="imageField">
-------------------------------------------
<div id="search" style="DISPLAY: none; Z-INDEX: 1; LEFT: 50%; MARGIN-LEFT: -400px; WIDTH: 600px; POSITION: absolute; TOP: 50px; HEIGHT: 314px">
<table id="Table3" cellSpacing="1" cellPadding="3" width="100%" bgColor="#40627b" border="0">
<tr>
<td vAlign="top" bgColor="#e4ecf3" style="width: 599px">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td colspan="7" align="right" vAlign="top">
<a href="#"><img onclick="showHide('search', false); return false;" height="15" alt="关闭" src="../images/close001.gif"
width="15" border="0"> </a>
</td>
</tr>
<tr>
<td width="10%" align="right"><strong>书名:</strong></td>
<td width="18%"><input name="txtSBookName" type="text" id="txtSBookName" style="width:100px;" runat="server" /></td>
<td width="8%" align="right"><strong>日期:</strong></td>
<td colspan="3" width="34%">
<input name="txtSDateFrom" type="text" id="txtSDateFrom" class="Wdate" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'txtSDateTo\')}'})" style="width:100px;" runat="server" /> -
<input name="txtSDateTo" type="text" id="txtSDateTo" class="Wdate" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'txtSDateFrom\')}'})" style="width:100px;" runat="server" /></td>
<td align="left" width="20%">
<input type="image" name="ImageButton_Search" id="ImageButton_Search" src="../images/ss05.gif" alt="" border="0" onserverclick="ImageButton_Search_ServerClick" runat="server" /></td>
<td></td>
</tr>
<tr>
<td width="10%" align="right"><strong>作者:</strong></td>
<td width="18%" align="left"><input name="txtSAuthor" type="text" id="txtSAuthor" style="width:100px;" runat="server" /></td>
<td width="8%" align="right"><strong>内容:</strong></td>
<td width="18%"><input name="txtSContent" type="text" id="txtSContent" style="width:100px;" runat="server" /></td>
<td align="right" style="width: 10%"><strong>出版社:</strong></td>
<td width="18%"><input name="txtSPubCom" type="text" id="txtSPubCom" style="width:100px;" runat="server" /></td>
<td></td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
<asp:TextBox ID="txtIsSearch" runat="server" Visible="False"></asp:TextBox></td>
</tr>
</table>
</div>
div需要自己定好位置,写在哪里都可以,一般我习惯写在</body>上方。
<script language="javascript" type="text/javascript">
//显示搜索框
function showHide(id, on)
{
var more=document.getElementById(id);
more.style.display=(on ? "inline" : "none");
}
</script>
--------------------------------------------
<input id="Image2" onclick="showHide('search', true); return false;" type="image" alt="搜索"
src="../images/ss05.gif" border="0" name="imageField">
-------------------------------------------
<div id="search" style="DISPLAY: none; Z-INDEX: 1; LEFT: 50%; MARGIN-LEFT: -400px; WIDTH: 600px; POSITION: absolute; TOP: 50px; HEIGHT: 314px">
<table id="Table3" cellSpacing="1" cellPadding="3" width="100%" bgColor="#40627b" border="0">
<tr>
<td vAlign="top" bgColor="#e4ecf3" style="width: 599px">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td colspan="7" align="right" vAlign="top">
<a href="#"><img onclick="showHide('search', false); return false;" height="15" alt="关闭" src="../images/close001.gif"
width="15" border="0"> </a>
</td>
</tr>
<tr>
<td width="10%" align="right"><strong>书名:</strong></td>
<td width="18%"><input name="txtSBookName" type="text" id="txtSBookName" style="width:100px;" runat="server" /></td>
<td width="8%" align="right"><strong>日期:</strong></td>
<td colspan="3" width="34%">
<input name="txtSDateFrom" type="text" id="txtSDateFrom" class="Wdate" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'txtSDateTo\')}'})" style="width:100px;" runat="server" /> -
<input name="txtSDateTo" type="text" id="txtSDateTo" class="Wdate" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'txtSDateFrom\')}'})" style="width:100px;" runat="server" /></td>
<td align="left" width="20%">
<input type="image" name="ImageButton_Search" id="ImageButton_Search" src="../images/ss05.gif" alt="" border="0" onserverclick="ImageButton_Search_ServerClick" runat="server" /></td>
<td></td>
</tr>
<tr>
<td width="10%" align="right"><strong>作者:</strong></td>
<td width="18%" align="left"><input name="txtSAuthor" type="text" id="txtSAuthor" style="width:100px;" runat="server" /></td>
<td width="8%" align="right"><strong>内容:</strong></td>
<td width="18%"><input name="txtSContent" type="text" id="txtSContent" style="width:100px;" runat="server" /></td>
<td align="right" style="width: 10%"><strong>出版社:</strong></td>
<td width="18%"><input name="txtSPubCom" type="text" id="txtSPubCom" style="width:100px;" runat="server" /></td>
<td></td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
<asp:TextBox ID="txtIsSearch" runat="server" Visible="False"></asp:TextBox></td>
</tr>
</table>
</div>