HTML实现遮罩层的方法 HTML中如何使用遮罩层
|
'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复制内容到剪贴板
<!DOCTYPE html> <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'> （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
