當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQuery 实现遮罩层

發布時間：2025/5/22 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery 实现遮罩层小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.樣式如下設置：

Js代碼??

????.mask?{????

????????????position:?absolute;?top:?0px;?filter:?alpha(opacity=60);?background-color:?#777;??

????????????z-index:?1002;?left:?0px;??

????????????opacity:0.5;?-moz-opacity:0.5;??

????????}??

</style>??

?? 其中： opacity:0.5;適用于IE， -moz-opacit:0.5;適用于火狐；你只需要都加上，便可以火狐和IE下都可以使用。

2.指定層的高度、和寬度。

Js代碼??

????//兼容火狐、IE8??

????function?showMask(){??

????????$("#mask").css("height",$(document).height());??

????????$("#mask").css("width",$(document).width());??

????????$("#mask").show();??

????}??

</script>??

3.在<body>中加入如下代碼，然后就可以看效果了：

Html代碼??

<div?id="mask"?class="mask"></div>??

<a?href="javascript:;"?onclick="showMask()"?>點我顯示遮罩層</a><br?/>??

轉載于:https://www.cnblogs.com/att1tude/p/3775389.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

以上是生活随笔為你收集整理的JQuery 实现遮罩层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。