HTML实现遮罩层的方法 HTML中如何使用遮罩层
|
副标题[/!--empirenews.page--]
Web页面中使用遮罩层，可防止重复操作，提示loading；也可以模拟弹出模态窗口。 实现思路：一个DIV作为遮罩层，一个DIV显示loading动态GIF图片。在下面的示例代码中，同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。 示例代码： index.html
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Commpatible" content="IE=edge"> <title>HTML遮罩层</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="header" id="header"> <div class="title-outer"> <span class="title"> HTML遮罩层使用 </span> </div> </div> <div class="body" id="body"> <iframe id="iframeRight" name="iframeRight" width="100%" height="100%" scrolling="no" frameborder="0" style="border: 0px;margin: 0px; padding: 0px; width: 100%; height: 100%;overflow: hidden;" onload="rightIFrameLoad(this)" src="body.html"></iframe> </div>
<!-- 遮罩层DIV --> <div id="overlay" class="overlay"></div> <!-- Loading提示 DIV --> （编辑：青岛站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
