div 弹框

最新推荐文章于 2020-08-17 09:14:29 发布

彼岸无花开

最新推荐文章于 2020-08-17 09:14:29 发布

阅读量237

点赞数

分类专栏： div 文章标签： div 弹框

本文链接：https://blog.youkuaiyun.com/weixin_44855207/article/details/102684305

版权

div 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS创建弹框，并展示了如何通过表格布局实现数据展示，包括使用不同样式区分行以及条件渲染单元格内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<link href="style/usagePercent.css" rel="stylesheet" type="text/css" />
<link href="style/searchResult.css" rel="stylesheet" type="text/css" />
<link href="style/searchDialog.css" rel="stylesheet" type="text/css" />


<!-- 链接 一个a标签 href 属性等于 div弹框的ID class属性等于样式   rev     --> 
 <a href="#searchDialog" class="nyroModal btnBlue" rev="modal">弹框</a>
 
 <!-- div id属性 等于a标签的href -->
 <div id="searchDialog" class="dialog-bg" style="width: 900px;">
			<div class="dialog-content">
			<h4 class="dialog-tt"><span></span><a href="#" class="nyroModalClose btn-close" id="closeBut" title="Close"></a></h4>				
			 <!-- id 表示在哪显示 -->
			<div id="browse" class="list" style="width:99%;margin-top: 15px;">
	        <table cellspacing="0" width="100%"> 
                <thead>
	                <tr>
	                	<th scope="col" width="20%;" class="listLeftLine" >111</th>
                    	<th scope="col" width="20%;" align="center" >222</th>
                    	<th scope="col" width="20%;" align="center" >333</th>
                    	<th scope="col" width="20%;" align="center" >444</th>
                    	<th scope="col" width="20%;" class="listRightLine" >555</th>
                    </tr>
                </thead>
                <tbody>
                    <s:iterator value="数据List" status="rowstatus">
						<tr <s:if test="#rowstatus.even == true">class="even"</s:if><s:else>class=""</s:else>  style="cursor:default;">
								<td align="center">
								    111的内容
				                </td>
				                <td align="center">
				                	<s:if test="222的值 == 0">
				                	222内容</s:if>
		                    		<s:else>222的内容</s:else>
				                </td>
				                <td align="center">
				                	333内容
				                </td>
				                <td align="center">
				                	444内容
				                </td>
				                 <td align="center" class="listRightLine">
				                	555内容
				                </td>
				         </tr>       
				    </s:iterator>
				</tbody>            
               </table>
	        </div>
			<div class="btn-group">
				关闭链接
				<a class="dialog-btn nyroModalClose" href="#">关闭</a>
			</div>
		</div>
	</div>