加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程 > 正文

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

发布时间:2020-03-20 18:11:51 所属栏目:编程 来源:站长网
导读:副标题#e# Web页面中使用遮罩层,可防止重复操作,提示loading;也可以模拟弹出模态窗口。 实现思路:一个DIV作为遮罩层,一个DIV显示loading动态GIF图片。在下面的示例代码中,同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。 示例代码: index.htm

    $('.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({   

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读