자바 스크립트와 CSS를 사용하여 팝업 창

Question

내 앱은 버튼 클릭시 팝업 창을 생성해야합니다. 이 앱은 안드로이드 및 IOS의 휴대 기기 전용입니다.

이 코드를 사용하여 동일한을받은 :

.popup 
{ 
    position:absolute; left:0; top:0; width:132; 
    border-style:solid; 
    border-width:4; 
    border-color:blue; 
    background-color:black; 
    padding:5px; 
    color:white; 
    font-family:Arial; 
    font-weight:bold; 
    font-size:10pt; 
    z-index:2; 
    visibility:hidden; 
} 

그러나 팝업 창이 열려있는 동안 배경을 흐리게하고 비활성화 할 수 있도록 내가 필요한 것은입니다. 어떻게해야합니까?

JavaScript 또는 CSS로 작성된 코드는 저와 잘 어울립니다.

Answer 1

<div id="popup"> 
    <div style="position:absolute;width:100%;height:100%;z-index:9000;opacity:.5,background-color:#000;"></div> 
    <div style="position:absolute;width:400px;height:400px;left:30%;top:20%;z-index:9001;">MY POPUP WINDOW</div> 
</div> 

Answer 2

jQuery Tool's overlay과 같은 jquery 플러그인 사용을 고려하십시오.

Answer 3

당신은 당신이 여기 http://www.w3schools.com/cssref/pr_pos_z-index.asp을 살펴 또는 캄차카에서 언급 한 바와 같이 몇 가지 플러그인을 사용할 수있는 위치 절대 9999

같은 높은 뭔가의 Z- 인덱스로 모든게 위에 사업부를 넣어해야합니다.

Answer 4

의견에 언급 된대로 IOS 용으로 개발하려는 경우 JQuery Mobile을 확인할 수 있습니다.

Answer 5

배경을 비활성화하거나 모달 라이트 박스를 만드는 것은 매우 간단하며 다른 주석에서 다루고 있습니다. 새 라이트 박스 창에 포커스를 설정했는지 확인하십시오. 그렇지 않으면 스크린 리더를 사용하는 사용자가 손실됩니다.

흐림 효과 만들기는 쉽지 않습니다. Webkit은 야간 생활에 CSS 흐림 효과를 도입했습니다. http://bit.ly/AuBZJO

이것이 궁극적으로 해결책이라고 생각합니다. 지금 우리는 RGBA를 사용하여 다른 주석 기가 지적한 것처럼 배경 div를 다소 투명하게 설정할 수 있습니다.

또는 당신은 풍차에 기울 첫째

Can you take a "screenshot" of the page using Canvas?

그런 다음 블러 화면 캡처에게 이미지를 생성 할 캔버스를 사용하여 뭔가를 함께 해킹 할 수

http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html