CSS遮罩层的实现_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

CSS遮罩层的实现_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:52 AM

偶然发现自己原来写了一个CSS遮罩层，虽然这个东西没什么技术含量，但如果本人离开公司后又遇见此类问题，那么可能又得花些时间来找资料了。所以决定还是把它记下来吧。
直接上代码吧。
第一步，html代码：

Java代码

《挂号须知》

上面的代码由三部分构成，popDiv表示弹出层，即单击“挂号须知”链接时弹出。
而bg表示遮罩层，即弹出层显示时将层后面的内容遮住。最后就是指显示的链接。
这三部分的CSS类如下：

Css代码

.mydiv {
#FCF4EA;
border: 1px solid #D00000;
text-align: center;
font-size: 12px;
z-index:99;
left:30%;/*FF IE7*/
top: 20%;/*FF IE7*/
margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
margin-top:0px;
position:absolute;/*FF IE7*/
}
.note_div{
width:700px;
height:400px;
overflow:scroll;
text-align: left;
padding:15px;
}
.bg {
#ccc;
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;
position:absolute;/*IE6*/
}

有个部分很重要，那就是bg遮罩层的要覆盖全屏的问题，这个东西比较难解决，所以借助了JQuery来解决，即页面初始化时再设置bg的大小：

Js代码

$(function(){
$(".bg").width($(document).width());
$('.bg').height($(document).height());
$('.bg').css('left',0);
$('.bg').css('top',0);
});

有了上面的基础之后，只需要在单击链接时通过ajax回调来设置需要显示的数据及遮罩层，如下：

Js代码

function showDiv(orgId){
regAsyncController.getOrgNotes(orgId,function(data){
$("#orgNote").html(data);
$("#bg").show();
$("#popDiv").fadeIn(1000);
});
}
function closeDiv(){
$("#popDiv").fadeOut(1000,function(){
$("#bg").hide();
});
}

这个过程其实比较简单，但本人并不经常搞页面的东西，所以CSS的东西也记不住几个，只能知道点就写下来了。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7868

Java教學

1649

CakePHP 教程

1407

Laravel 教程

1301

PHP教程

1244

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？ Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗：404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。