专栏首页好好学习吧html遮罩层实现

html遮罩层实现

html文件内容如下

<!--调出子窗口按钮-->
<button class="add" onclick="addClick();">新增</button>
<!--子窗口-->
<div id="addBox" class="addBox">
    <a href="javascript:;" onclick="jQuery('.addBox').hide();jQuery('.shadow').hide();" class="close">×&nbsp;&nbsp;</a>
<div>
<!--遮罩层-->
<div class="shadow"></div>

css文件内容如下

.shadow{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:998;
    background-color:#000;
    opacity:0.6;
    display:none;
}
.addBox{
    //其他属性  
    z-index:999;
}

js内容如下

function addClick(){
    $(".shadow").css({'display':'block'});
    $('.addBox').show();
    return 0;
}

效果如下

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • python抓取不得姐动图(报错 urllib.error.HTTPError: HTTP Error 403: Forbidden)

    未来sky
  • 在博文顶部添加文章字数及阅读时间信息:阅读本文需要xx分钟

    未来sky
  • ascii码对照表(收藏)

    https://blog.csdn.net/yueyueniaolzp/article/details/82178954

    未来sky
  • 回放订阅 | NVIDIA CEO 黄仁勋 GTC CHINA 2019 主题演讲

    Orin是英伟达花费4年时间投入数十亿美元打造,性能比最新一代Xavier提升7倍,算力最高可达200TOPS。

    AI研习社
  • 番外篇:入门React

    原生js代码乱七八糟的时候,那就来体验一下React。 Tip:内容有点乱,秘籍在最后

    用户3467126
  • python爬虫第一天

           控制节点,也叫中央控制器,主要负责根据url地址分配线程,并调用爬虫节点进行具体的爬行。

    py3study
  • Kaggle初体验心得分享:PLAsTiCC天文分类比赛(附前五方案链接)

    很高兴,我在本周早些时候完成了我的第一个Kaggle比赛。和富有经验的高手合作进行时间序列分析是非常酷的,而且我确确实实在时间序列处理上学到了很多东西。不仅如此...

    AI研习社
  • 为了这个羞羞的机器学习项目,我差点成为“鉴黄师”

    开个玩笑,不过今天确实要给大家介绍一个不太一样有点羞羞的机器学习项目,也就是嘿嘿嘿的时候,最加深感情的某种动作的分析,英文俗称“blowjob”或者“oral ...

    华章科技
  • 为了这个羞羞的机器学习项目,我差点成为“鉴黄师”

    开个玩笑,不过今天文摘菌确实要给大家介绍一个不太一样有点羞羞的机器学习项目,也就是嘿嘿嘿的时候,最加深感情的某种动作的分析,英文俗称“blowjob”或者“or...

    大数据文摘
  • 为了这个羞羞的机器学习项目,我差点成为“鉴黄师”

    开个玩笑,不过今天小编确实要给大家介绍一个不太一样有点羞羞的机器学习项目,也就是嘿嘿嘿的时候,最加深感情的某种动作的分析,英文俗称“blowjob”或者“ora...

    磐创AI

扫码关注云+社区

领取腾讯云代金券