> 웹 프론트엔드 > JS 튜토리얼 > 주류 브라우저와 호환되는 jQuery CSS를 사용하여 마스크 레이어를 구현하는 간단한 코드_jquery

주류 브라우저와 호환되는 jQuery CSS를 사용하여 마스크 레이어를 구현하는 간단한 코드_jquery

WBOY
풀어 주다: 2016-05-16 16:34:18
원래의
1215명이 탐색했습니다.

페이지에서 "등록"을 클릭하면 마스크 레이어 위에 불투명도가 있는 검은색 마스크 레이어가 나타납니다. 이때 등록 상자를 제외한 페이지의 다른 요소는 클릭할 수 없습니다. 등록함에 "산책하세요"라고 적으면 마스크가 사라집니다.

미리보기 주소:

http://jsfiddle.net/p2x3c7df/embedded/result/

핵심 포인트:

1. 마우스 휠로 페이지를 위아래로 스크롤하거나 페이지를 확대/축소하거나 브라우저 창 크기를 조정할 때를 포함하여 등록 상자는 항상 가로 및 세로 중앙에 위치합니다

주로 CSS에 의해 제어되며 등록 상자의 너비와 높이가 결정되었습니다(620*420px). 먼저 position:fixed를 사용하여 브라우저 창을 기준으로 절대 위치를 지정한 다음 수직으로 가운데에 배치합니다. %; 왼쪽:50%; 여백:-210px 0 0 -310px;

2. 페이지를 확대하고 브라우저 창 크기를 조정할 때 마스크 레이어는 항상 문서 전체를 덮어야 하며, 탐색을 위해 스크롤해야 하는 부분은 물론 브라우저에 보이는 전체 창과도 호환되어야 합니다. Chrome 및 IE 장치와 같은 다양한 커널 브라우저

두 가지 중요한 속성: js의 window.screen.availHeight 및 jQuery의 $(document.body).outerHeight(true). window.screen.availHeight는 화면에서 사용 가능한 작업 영역의 높이를 나타내며 $(document.body).outerHeight(true)는 브라우저의 현재 창에 대한 문서 본문의 전체 너비를 나타냅니다. 테두리 패딩 여백. window.screen.availHeight는 주로 IE(11)에서 페이지 크기를 조정한 후에도 마스크 레이어가 브라우저 창을 채울 수 있는지 확인하는 데 사용됩니다.

3. 마스크 레이어가 나타나면 페이지를 위아래로 스크롤할 수 있지만 로그인 상자를 제외한 페이지의 다른 요소는 작동할 수 없습니다

코드:

HTML(충분히 높은 문서를 테스트해야 함):

코드 복사 코드는 다음과 같습니다.


   
   

   
   
   
       

           
                注册
           

       

        자살.
        한편 몬테 크리스토도 에마누엘과 막시밀리안과 함께 마을로 돌아왔습니다. 그들의 복귀는 유쾌했다. 에마뉘엘은 사건이 평화적으로 종결된 데 대해 기쁨을 숨기지 않았고 큰 소리로 기쁨을 표현했습니다. 마차 구석에 있던 모렐은 처남의 유쾌함을 말로 표현하는 동시에 내면의 기쁨도 똑같이 느꼈지만, 그 기쁨은 그의 얼굴에서만 드러났습니다. Barriere du Trone에서 그들은 자신의 자리에서 보초처럼 움직이지 않고 기다리고 있던 Bertuccio를 만났습니다. 몬테 크리스토는 창밖으로 고개를 내밀고 낮은 목소리로 그와 몇 마디 말을 나누었고, 청지기는 사라졌다. 그들이 Place Royale 끝에 이르렀을 때 Emmanuel은 "백작님, 저를 문앞에 내려놓으십시오. 그러면 제 아내가 저나 당신 때문에 한 순간도 불필요한 걱정을 하지 않을 것입니다."라고 말했습니다.
        "우리의 승리를 과시하는 것이 우스꽝스럽지 않다면 백작님을 우리 집에 초대하고 싶습니다. 게다가 그 사람은 틀림없이 떨리는 마음으로 위로를 해줄 것입니다. 그러니 우리는 친구를 작별하고 서둘러 집으로 돌아가도록 하겠습니다. "
        "잠깐만 멈춰주세요." 몬테 크리스토가 말했습니다. "나의 두 동료를 잃지 않게 해주세요. 에마뉘엘, 당신의 매력적인 아내에게 돌아가서 그녀에게 최고의 찬사를 전하십시오. 그리고 모렐, 나와 함께 샹젤리제로 가십시오."
        "기꺼이요." 막시밀리안이 말했다. "특히 그 분기에 사업이 있어서요."
        "아침 식사를 기다릴까요?" 에마뉘엘이 물었다.
        "아니요." 청년이 대답했다. 문은 닫혀 있었고 마차는 계속 나아갔다. "내가 당신에게 얼마나 큰 행운을 가져다줬는지 보세요!" 백작과 단둘이 있을 때 모렐이 말했다. "당신은 그렇게 생각하지 않았나요?"
        "그렇습니다." 몬테 크리스토가 말했습니다. "그러므로 나는 당신을 내 곁에 두고 싶었습니다."
        "기적이네요!" 모렐은 계속해서 자신의 생각에 대답했습니다.
        "무엇?" 몬테 크리스토가 말했다.
        "방금 무슨 일이 일어났나요?"
        "그래요. 당신 말이 맞아요. 정말 기적이에요." 백작님이 말했습니다.
        "앨버트는 용감해요." 모렐이 다시 말했다.
        몬테 크리스토는 "매우 용감하다"고 말했다. "나는 그가 머리 위에 칼을 매달고 자는 것을 본 적이 있습니다."

        "그녀는 집을 떠날 예정입니다." 청지기가 말했습니다.
        "그리고 그녀의 아들은요?"
        "그의 하인인 플로렌틴은 그도 똑같이 할 것이라고 생각합니다."
        "이쪽으로 오세요." 몬테 크리스토는 베르투치오를 자신의 서재로 데려가서 우리가 본 편지를 써서 관리인에게 주었습니다. "가세요." 그는 재빨리 말했다. "하지만 먼저 하이디에게 내가 돌아왔다는 소식을 전해 주세요."
        "여기 있습니다." 마차 소리를 듣고 아래층으로 달려가던 어린 소녀는 백작이 무사히 돌아오는 것을 보고 기쁨으로 얼굴이 빛났습니다. 베르투치오가 떠났다. 아버지를 찾는 딸의 모든 이동, 사랑하는 연인을 만나는 여주인의 모든 기쁨은 그녀가 그토록 기대했던 이 만남의 첫 순간 동안 하이디에게 느껴졌습니다. 비록 덜 분명하기는 하지만 의심할 바 없이 몬테 크리스토의 기쁨은 그다지 강렬하지 않았습니다. 오랫동안 고통받은 마음의 기쁨은 오랜 가뭄 끝에 땅에 내리는 이슬과 같습니다. 심장과 땅 모두 그 위에 떨어지는 유익한 수분을 흡수하며 겉으로는 아무것도 눈에 띄지 않습니다.
        몬테 크리스토는 오랫동안 감히 믿지 못했던 생각을 하기 시작했습니다. 세상에는 두 대의 메르세데스가 있고 아직은 행복할지도 모른다는 생각이 들었습니다. 행복에 의기양양해진 그의 눈은 하이디의 눈물 어린 시선을 열심히 읽고 있었는데 갑자기 문이 열렸다. 백작은 눈썹을 찌푸렸다. "M. 드 모르세르프!" 밥티스틴은 마치 그 이름이면 충분하다는 듯이 말했다. 오히려 백작님의 얼굴이 밝아졌습니다.
        "자작인가, 백작인가?" 그가 물었다.
        "카운트."
        "오, 아직 끝나지 않았나요?" 하이디가 외쳤다.
        "다 끝났는지 모르겠어요, 사랑하는 아가야." 몬테 크리스토가 어린 소녀의 손을 잡으며 말했다. "하지만 나는 당신이 더 이상 두려워할 것이 없다는 것을 압니다."
        "그러나 그것은 비참한 것이다" --
        "그 사람은 나를 해칠 수 없어, 하이디." 몬테 크리스토가 말했다. "두려울 이유가 있었던 것은 그의 아들뿐이었습니다."
        "그리고 제가 어떤 고통을 겪었는지 당신은 절대 모르실 겁니다, 영주님." 어린 소녀가 말했습니다. 몬테 크리스토는 미소를 지었다. "내 아버지의 무덤 옆에서요." 그는 어린 소녀의 머리 위로 손을 뻗으며 말했다. "하이디야, 어떤 불행이 일어나도 나에게는 그런 일이 일어나지 않을 것이라고 맹세한다."
        문은 활짝 열려 있었고, 마당 한가운데에는 마차가 서 있었습니다. 이렇게 고귀한 저택 앞에는 이상한 광경이 펼쳐졌습니다. 백작은 겁에 질린 표정으로 그것을 바라보았으나 감히 그 의미를 묻지도 않고 자기 아파트로 달려갔다. 두 사람이 계단을 내려오고 있었습니다. 그에게는 그들을 피하기 위해 벽감 속으로 살금살금 들어갈 시간밖에 없었다. 아들의 팔에 기대어 집을 나서는 메르세데스의 모습이었다. 그들은 다마스크 커튼 뒤에 숨어 메르세데스 드레스가 자신을 스치는 것을 거의 느낄 뻔한 불행한 존재와 아들의 따뜻한 숨결을 느끼며 다음과 같이 말했습니다. "용기하세요, 어머니! 오세요, 이곳은 더 이상 우리 집이 아닙니다!" " 말이 사라졌고, 발걸음도 멀리 사라졌습니다. 장군은 커튼에 매달려 몸을 일으켰다. 그는 아내와 아들에게 동시에 버림받은 아버지의 품에서 흘러나온 가장 끔찍한 흐느낌을 토해냈습니다. 곧 그는 해크니 코치의 철제 계단이 덜거덕거리는 소리를 들었고, 이어서 마부의 목소리가 들렸고, 이어서 무거운 차량의 굴러가는 소리가 창문을 흔들었다. 그는 세상에서 그가 사랑했던 모든 것을 다시 한 번 보기 위해 침실로 달려갔습니다. 그러나 해크니 코치는 차를 몰았고 메르세데스의 머리도 그녀의 아들도 창가에 나타나지 않아 집이나 버림받은 아버지와 남편을 마지막으로 살펴보았다. 그리고 그 객차의 바퀴가 관문을 가로지르는 바로 그 순간, 보고가 들렸고, 폭발로 인해 깨진 창문 중 하나를 통해 짙은 연기가 새어나왔습니다.
        문은 활짝 열려 있었고, 마당 한가운데에는 마차가 서 있었습니다. 이렇게 고귀한 저택 앞에는 이상한 광경이 펼쳐졌습니다. 백작은 겁에 질린 표정으로 그것을 바라보았으나 감히 그 의미를 묻지도 않고 자기 아파트로 달려갔다. 두 사람이 계단을 내려오고 있었습니다. 그에게는 그들을 피하기 위해 벽감 속으로 살금살금 들어갈 시간밖에 없었다. 아들의 팔에 기대어 집을 나서는 메르세데스의 모습이었다. 그들은 다마스크 커튼 뒤에 숨어 메르세데스 드레스가 자신을 스치는 것을 거의 느낄 뻔한 불행한 존재와 아들의 따뜻한 숨결을 느끼며 다음과 같이 말했습니다. "용기하세요, 어머니! 오세요, 이곳은 더 이상 우리 집이 아닙니다!" " 말이 사라졌고, 발걸음도 멀리 사라졌습니다. 장군은 커튼에 매달려 몸을 일으켰다. 그는 아내와 아들에게 동시에 버림받은 아버지의 품에서 흘러나온 가장 끔찍한 흐느낌을 토해냈습니다. 곧 그는 해크니 코치의 철제 계단이 덜거덕거리는 소리를 들었고, 이어서 마부의 목소리가 들렸고, 이어서 무거운 차량의 굴러가는 소리가 창문을 흔들었다. 그는 세상에서 그가 사랑했던 모든 것을 다시 한 번 보기 위해 침실로 달려갔습니다. 그러나 해크니 코치는 차를 몰았고 메르세데스의 머리도 그녀의 아들도 창가에 나타나지 않아 집이나 버림받은 아버지와 남편을 마지막으로 살펴보았다. 그리고 그 객차의 바퀴가 관문을 가로지르는 바로 그 순간, 보고가 들렸고, 폭발로 인해 깨진 창문 중 하나를 통해 짙은 연기가 새어나왔습니다.
   


HTML

CSS:

复主代码 代码如下:

a{ 텍스트 장식:없음; 색상:#fff;}
#rbox{

    너비:620px;
    높이:420px;
    위치:고정;
    상단:50%;
    왼쪽:50%;
    여백:-210px 0 0 -310px;
    테두리 반경:8px; /*圆角*/
    배경색:#999;
    Z-색인:3;
    표시:없음;   
}

.go{

    위치:절대;
    오른쪽: 10px;
    상단: 10px;
    패딩: 5px 12px;
    배경: rgba(0,0,0,.4);
    상자 그림자: 0 0 0 2px rgba(255,255,255,.4);
    색상: #fff;
    테두리 반경: 26px;
}

#마스크{

    배경색:#000;
    위치:절대;
    상단:0;
    왼쪽:0;
    디스플레이:없음;
    Z-색인:2;
}

#register{ z-index:1; 색상:파란색;}
.content{너비:800px; 높이:자동; 여백:0 자동;}

JS:

复主代码 代码如下:

$(함수(){
 
//등록하려면 클릭
$("#등록").click(function(){
 
If(window.screen.availHeight > $(document.body).outerHeight(true)){
                             
//화면의 사용 가능한 작업 영역 높이 > 테두리 패딩 여백을 포함한 브라우저 현재 창의 문서 본문 전체 높이인 경우(확대/축소 시)
               $("#mask").show().css({"opacity":"0.5","width":"100%","height":window.screen.availHeight});
         }그 외{
                             
$("#mask").show().css({"불투명도":"0.5","너비":"100%","높이":$(document.body).outerHeight(true)});
~          $("#rbox").show();                                                   })

//브라우저에 보이는 창의 변화에 ​​따라 마스크의 너비와 높이를 조정하여 마스크가 브라우저를 채우도록 합니다.

$(window).resize(function(){                               
//브라우저 창의 변화에 ​​따라 마스크 너비와 높이를 변경하여 마스크가 브라우저 전체를 채우도록 합니다.
If($("#mask").css("너비")!=0){

$ ("#Mask"). Css ("width", "100%") // 필요한 경우 너비를 판단할 수도 있습니다

if(window.screen.availHeight > $(document.body).outerHeight(true)){

~                  $("#mask").css({"opacity":"0.5","width":"100%","height":window.screen.availHeight});

               }그밖에{

~                  $("#mask").css({"opacity":"0.5","width":"100%","height":$(document.body).outerHeight(true)});
            }
}
});

$(".go").click(function(){
 
          $("#mask").hide();
          $("#rbox").hide();

});

});



이 기능이 완료되었습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿