HTML实现遮罩层的方法 HTML中如何使用遮罩层_HTML/Xhtml_网页制作
程序员文章站
2022-04-13 09:13:52
...
Web页面中使用遮罩层,可防止重复操作,提示loading;也可以模拟弹出模态窗口。
实现思路:一个DIV作为遮罩层,一个DIV显示loading动态GIF图片。在下面的示例代码中,同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。
示例代码:
index.html
XML/HTML Code复制内容到剪贴板
- /span>>
- 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 id="overlay" class="overlay">div>
- div id="loadingTip" class="loading-tip">
- img src="images/loading.gif" />
- div>
- div class="modal" id="modalDiv">div>
- script type='text/javascript' src="js/jquery-1.10.2.js">script>
- script type="text/javascript" src="js/index.js">script>
- body>
- html>
index.css
CSS Code复制内容到剪贴板
- * {
- margin: 0;
- padding: 0;
- }
- html, body {
- width: 100%;
- height: 100%;
- font-size: 14px;
- }
- div.header {
- width: 100%;
- height: 100px;
- border-bottom: 1px dashed blue;
- }
- div.title-outer {
- position: relative;
- top: 50%;
- height: 30px;
- }
- span.title {
- text-align: left;
- position: relative;
- left: 3%;
- top: -50%;
- font-size: 22px;
- }
- div.body {
- width: 100%;
- }
- .overlay {
- position: absolute;
- top: 0px;
- left: 0px;
- z-index: 10001;
- display:none;
- filter:alpha(opacity=60);
- background-color: #777;
- opacity: 0.5;
- -moz-opacity: 0.5;
- }
- .loading-tip {
- z-index: 10002;
- position: fixed;
- display:none;
- }
- .loading-tip img {
- width:100px;
- height:100px;
- }
- .modal {
- position:absolute;
- width: 600px;
- height: 360px;
- border: 1px solid rgba(0, 0, 0, 0.2);
- box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.5);
- display: none;
- z-index: 10003;
- border-radius: 6px;
- }
index.js
JavaScript Code复制内容到剪贴板
- function rightIFrameLoad(iframe) {
- var pHeight = getWindowInnerHeight() - $('#header').height() - 5;
- $('div.body').height(pHeight);
- console.log(pHeight);
- }
- // 浏览器兼容 取得浏览器可视区高度
- function getWindowInnerHeight() {
- var winHeight = window.innerHeight
- || (document.documentElement && document.documentElement.clientHeight)
- || (document.body && document.body.clientHeight);
- return winHeight;
- }
- // 浏览器兼容 取得浏览器可视区宽度
- function getWindowInnerWidth() {
- var winWidth = window.innerWidth
- || (document.documentElement && document.documentElement.clientWidth)
- || (document.body && document.body.clientWidth);
- return winWidth;
- }
- /**
- * 显示遮罩层
- */
- function showOverlay() {
- // 遮罩层宽高分别为页面内容的宽高
- $('.overlay').css({'height':$(document).height(),'width':$(document).width()});
- $('.overlay').show();
- }
- /**
- * 显示Loading提示
- */
- function showLoading() {
- // 先显示遮罩层
- showOverlay();
- // Loading提示窗口居中
- $("#loadingTip").css('top',
- (getWindowInnerHeight() - $("#loadingTip").height()) / 2 + 'px');
- $("#loadingTip").css('left',
- (getWindowInnerWidth() - $("#loadingTip").width()) / 2 + 'px');
- $("#loadingTip").show();
- $(document).scroll(function() {
- return false;
- });
- }
- /**
- * 隐藏Loading提示
- */
- function hideLoading() {
- $('.overlay').hide();
- $("#loadingTip").hide();
- $(document).scroll(function() {
- return true;
- });
- }
- /**
- * 模拟弹出模态窗口DIV
- * @param innerHtml 模态窗口HTML内容
- */
- function showModal(innerHtml) {
- // 取得显示模拟模态窗口用DIV
- var dialog = $('#modalDiv');
- // 设置内容
- dialog.html(innerHtml);
- // 模态窗口DIV窗口居中
- dialog.css({
- 'top' : (getWindowInnerHeight() - dialog.height()) / 2 + 'px',
- 'left' : (getWindowInnerWidth() - dialog.width()) / 2 + 'px'
- });
- // 窗口DIV圆角
- dialog.find('.modal-container').css('border-radius','6px');
- // 模态窗口关闭按钮事件
- dialog.find('.btn-close').click(function(){
- closeModal();
- });
- // 显示遮罩层
- showOverlay();
- // 显示遮罩层
- dialog.show();
- }
- /**
- * 模拟关闭模态窗口DIV
- */
- function closeModal() {
- $('.overlay').hide();
- $('#modalDiv').hide();
- $('#modalDiv').html('');
- }
body.html
XML/HTML Code复制内容到剪贴板
- /span>>
- html lang="zh-CN">
- head>
- meta charset="utf-8">
- meta http-equiv="X-UA-Commpatible" content="IE=edge">
- title>body 页面title>
- style type="text/css">
- * {
- margin: 0;
- padding: 0;
- }
- html, body {
- width: 100%;
- height: 100%;
- }
- .outer {
- width: 200px;
- height: 120px;
- position: relative;
- top: 50%;
- left: 50%;
- }
- .inner {
- width: 200px;
- height: 120px;
- position: relative;
- top: -50%;
- left: -50%;
- }
- .button {
- width: 200px;
- height: 40px;
- position: relative;
- }
- .button#btnShowLoading {
- top: 0;
- }
- .button#btnShowModal {
- top: 30%;
- }
- style>
- script type="text/javascript">
- function showOverlay() {
- // 调用父窗口显示遮罩层和Loading提示
- window.top.window.showLoading();
- // 使用定时器模拟关闭Loading提示
- setTimeout(function() {
- window.top.window.hideLoading();
- }, 3000);
- }
- function showModal() {
- // 调用父窗口方法模拟弹出模态窗口
- window.top.showModal($('#modalContent').html());
- }
- script>
- head>
- body>
- div class='outer'>
- div class='inner'>
- button id='btnShowLoading' class='button' onclick='showOverlay();'>点击弹出遮罩层button>
- button id='btnShowModal' class='button' onclick='showModal();'>点击弹出模态窗口button>
- div>
- div>
- div id='modalContent' style='display: none;'>
- div class='modal-container' style='width: 100%;height: 100%;background-color: white;'>
- div style='width: 100%;height: 49px;position: relative;left: 50%;top: 50%;'>
- span style='font-size: 36px; width: 100%; text-align:center; display: inline-block; position:inherit; left: -50%;top: -50%;'>模态窗口1span>
- div>
- button class='btn-close' style='width: 100px; height: 30px; position: absolute; right: 30px; bottom: 20px;'>关闭button>
- div>
- div>
- script type='text/javascript' src="js/jquery-1.10.2.js">script>
- body>
- html>
运行结果:
初始化
显示遮罩层和Loading提示
显示遮罩层和模拟弹出模态窗口
以上就是本文的全部内容,希望对大家的学习有所帮助。
推荐阅读
-
html中实现文本框出现提示功能的多种方法_HTML/Xhtml_网页制作
-
通过html为FLASH加链接的实现代码(div层)_HTML/Xhtml_网页制作
-
使用flash插件来调用pc的摄像头如何将它嵌入到TML页面中_HTML/Xhtml_网页制作
-
HTML实现遮罩层的方法 HTML中如何使用遮罩层
-
通过html为FLASH加链接的实现代码(div层)_HTML/Xhtml_网页制作
-
Html中使用自定义图片来实现checkbox显示的方法_HTML/Xhtml_网页制作
-
HTML实现遮罩层的方法 HTML中如何使用遮罩层_HTML/Xhtml_网页制作
-
a 中调用js的几种方法整理及使用推荐_HTML/Xhtml_网页制作
-
使用flash插件来调用pc的摄像头如何将它嵌入到TML页面中_HTML/Xhtml_网页制作
-
使用iframe在网页中嵌入其他网页的方法_HTML/Xhtml_网页制作