반응 형 팝업 div를 만드는 방법은 무엇입니까?

기본적으로 내 웹 사이트는 반응 형이지만 아래는 내 팝업 div의 코드입니다. div는 데스크톱에서 잘 작동하지만 휴대 전화의 초상화에서는 화면 밖으로 나가기 때문에이 div도 반응 적으로 만들 필요가 있습니다. 또한 나는이 div가 fadein 또는 다른 애니메이션과 함께 화면에 나타나기를 원한다. 나는 현재 사용법을 모른다. PLZ반응 형 팝업 div를 만드는 방법은 무엇입니까?

HTML은 여기에 도움이 : 여기

<section id="html" class="content-section text-center"> 
     <div class="download-section"> 
     <div class="container"> 
      <div class="col-lg-8 col-lg-offset-2"> 
       <h2>HTML Tutorials</h2> 
       <p></p> 
       <a href="javascript:void(0)" class="btn btn-default btn-lg"  onclick="toggle_visibility('popupBoxHTML');">More HTML Tutorials</a> 
       <div id="popupBoxHTML"> 
       <div class="popupBoxWrapper"> 
        <div class="popupBoxContent"> 
         <h3>HTML</h3> 
         <p>You are currently viewing HTML Box.</p> 
         <p>Click <a href="javascript:void(0)" onclick="toggle_visibility('popupBoxHTML');">here</a> to close popup box one. </p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    </section>

CSS :

#popupBoxOnePosition, #popupBoxHTML{ 
margin:10px 0 0 0; 
top: 0; 
left: 0; 
position: fixed; 
width: 100%; 
height: 100%; 
background:#333; 
display: none; 
opacity:.95; 
z-index:100; 
widows:50%; 

} 

.popupBoxWrapper{ 
width: 550px; 
margin: 
50px auto; 
text-align: left; 

} 
.popupBoxContent{ 
    background-color: 
    #000; 
padding: 
    15px; 
opacity:1; 
border-radius:15px; 
-o-box-shadow:0 0 50px ##219ab3; 
-moz-box-shadow:0 0 50px ##219ab3; 
-webkit-box-shadow:0 0 50px ##219ab3; 
-ms-box-shadow:0 0 50px ##219ab3; 
transition:ease-in; 
transition-delay:1s; 
-webkit-transition:ease-in; 
}

자바 스크립트 여기 :

function toggle_visibility(id) { 
       var e = document.getElementById(id); 
       if(e.style.display == 'block') 
        e.style.display = 'none'; 
       else 
        e.style.display = 'block'; 

      }

출처

2015-01-30 user3615189

당신이 반응하기 위해 미디어 쿼리를 추가해야합니다.

@media only screen and (max-width: 600px) { 
.popupBoxWrapper{ 
    width:100%; 
    } 
}

화면 폭이 600px 미만이되면이 CSS는 고정 550px 대신 팝업 폭을 100 %로 만듭니다. 이렇게하면 div가 화면에 맞게됩니다.

출처

2015-01-30 16:39:46 theHarsh

네, 효과가있었습니다. 오래 살았습니다. – user3615189

내 팝업 PLZ에 상자 그림자를 추가하는 방법을 알 수 있습니까? – user3615189

Bootstrap Modals

또는

선언 상태 표기와 해시 추적 플랫, 반응, 가볍고, 쉽게 사용자 정의 모달 창 플러그인

Remodal
.

출처

2015-03-26 11:29:17 Timeless

아니요 css 미디어 쿼리가 필요하지 않습니다.

다음과 같이 CSS를 변경하십시오. 업데이트 너비 : 550px에서 최대 너비 : 550px 및 너비 추가 : 95 %; 남은 5 % 너비는 화면이 550px 미만일 때 모양과 느낌을 팝업으로 제공합니다.

.popupBoxWrapper{ 
    max-width: 550px; 
    width: 95%; 
    margin: 
    50px auto; 
    text-align: left; 
}

출처

2016-04-13 09:44:36 RajivRisi

반응 형 팝업 div를 만드는 방법은 무엇입니까?

답변

관련 문제