튀어 나오면 맨 위로 스크롤되지 않는 팝업 div를 만드는 방법은 무엇입니까?

여기 < BR의 긴 세트>, 내가 목적에 그것을했다 그냥 내 페이지가 다른 개체와 군집 내 링크 페이지의 중간에 있었던 것을 말하는 후 링크가있어 코드튀어 나오면 맨 위로 스크롤되지 않는 팝업 div를 만드는 방법은 무엇입니까?

<html> 
     <head> 
      <style> 
       #container { 
        border: 1px solid black; 
        width: 100px; 
        height: 20px; 
        margin: 0 auto; 
        text-align: center; 
       } 

       #fade { 
        display: none; 
        background: black; 
        opacity:0.4; 
        filter:alpha(opacity=50); 
        z-index: 1; 
        position: fixed; left: 0; top: 0; 
        width: 100%; height: 100%; 
       } 

       #window { 
        width: 200px; 
        height: 50px; 
        background: white; 
        position:absolute; 
        left:40%; 
        top:40%; 
        z-index: 2; 
        text-align: center; 
       } 
      </style> 
      <script type="text/javascript" src='/libs/jquery/jquery.js'></script> 
      <script> 
       $(document).ready(function() { 
        $('#view').click(function() { 
         $('#fade').fadeIn(); 

         var addWindow = "<div id='window'><h3>This is a popup window.</h3></div>" 
         $(addWindow).appendTo('body'); 
        }); 

        $('#fade').click(function() { 
         $('#fade, #window').fadeOut(); 
        }); 
       }); 
      </script> 
     </head> 

     <body> 
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      <div id="container"> 
       <a href="#" id="view"> 
        View window 
       </a> 
      </div> 
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      <div id="fade"></div> 
     </body> 
    </html>

입니다 . 여기서 일어난 일은 '보기 창'을 클릭하면 div/창이 열리지 만 내 창은 항상 페이지 상단에 나타납니다. 끝까지 스크롤하면 내 창이 나타납니다. 내 창을 맨 위로 스크롤하지 않고 '창보기'링크를 클릭 한 위치와 동일한 위치에 나타나게하고 싶습니다. 가능한가? 나는 그것이 단지 CSS의 문제라고 생각한다. 제발 도와주세요! 감사. 링크를 클릭하면

팝업 위치가에서 가져온 설정되어있는 페이지 상단으로 이동

1 컨테이너

되어있다 : 내가보기로

출처

2012-04-20 kimbebot

두 가지 문제가 있습니다 기본 클릭 이벤트가 발생하지 않도록하십시오.

2 클릭시 동적으로 상단 값을 설정하여 팝업이 화면에 배치되도록 수정할 수 있습니다. 또는 대신 위치 고정을 사용할 수 있습니다.

너무 유 알다시피,

.. http://jsfiddle.net/A2YjS/이

출처

2012-04-20 08:56:37 lnrbob

예는 gotto sp00m가 작성한 어떻게 그런 짓을 상단을 50 %이어야한다 왼쪽 :

여기 설정을 예를했습니다 왼쪽 여백과 왼쪽 여백은 각각 너비와 높이의 절반이어야합니다. 팝업 분할을 가운데 가운데로 정확히 맞 춥니 다.

출처

2012-04-20 11:17:17

코드를 다음 코드로 변경하십시오.

  #window { 
       width: 200px; 
       height: 50px; 
       background: white; 
       position:absolute; 
       left:40%; 
       z-index: 2; 
       text-align: center; 
      } 


     <script> 
      $(document).ready(function() { 
       $('#view').click(function() { 
        $('#fade').fadeIn(); 

        var addWindow = "<div id='window'><h3>This is a popup window.</h3></div>" 
        $(addWindow).appendTo('body'); 

        $('#window').css("top", ($('#view').offset().top) + "px"); 
       }); 

       $('#fade').click(function() { 
        $('#fade').fadeOut(); 
        $('#window').remove(); 
       }); 
      }); 
     </script> 


     <div id="container"> 
      <div id="view"> 
       View window 
      </div> 
     </div>

출처

2012-04-20 12:09:00

감사합니다. 처음 실행했을 때 올바른 장소에 윈도우가 나타나면 #fade를 클릭하고 #view를 다시 클릭했지만 윈도우가 맨 아래에 나타납니다. – kimbebot

"보기 창"에 태그를 사용하는 경우 div 태그로 바꾸고 다시 시도하십시오. –

튀어 나오면 맨 위로 스크롤되지 않는 팝업 div를 만드는 방법은 무엇입니까?

답변

관련 문제