HTML实现遮罩层的方法 HTML中如何使用遮罩层(5)

发布时间：2020-03-19 03:42 所属栏目：116 来源：站长网

导读：'top':(getWindowInnerHeight()-dialog.height())/2+'px', 'left':(getWindowInnerWidth()-dialog.width())/2+'px' }); //窗口DIV圆角 dialog.find('.modal-container').css('border-radius','6px'); //模态窗口关

'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>

<head>

* {

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>

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>

（编辑：ASP站长网）