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

2020-04-16 21:44:51易采站长站整理

    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,将本页面DIV内容设置到父窗口DIV上并模态显示 –>