보기 포트를 기반으로 한 위치 지정

Question

브라우저 창의보기 포트와 관련하여 div 위치를 지정하고 싶습니다. 현재 동적 인 일부 jquery 일부 팝업 창 크기를 기준으로하지만 점점 그들은 절대 위치 때문에 페이지 아래쪽에 기반합니다 그래서 아래로 스크롤하여 프로젝트를 클릭하십시오. 페이지에서 팝업은 뷰포트 밖의 페이지 상단에 위치합니다.

"Redcat"프로젝트를 클릭하면 특히 여기에서 볼 수 있습니다.

뷰포트의 현재 위치를 기준으로 div를 배치하는 방법이 있습니까?

HTML :

<div class="container"> 
    <div class="project"> 
    <a class="close">Close &times;</a> 
    <img src="/img/lova_popup_slide01.jpg" width="500" height="530" alt="" /> 
    </div> 
    <div class="description"><p>Description</p></div> 
</div> 

JQuery와 :

$(document).ready(function() { 
//Find & Open 

$(".projectThumb").click(function(){ 
    $("#backgroundPopup").show(); 
     htmlName = $(this).find("img").attr("name"); 
     $("#data").load("/content/" + htmlName + ".html", null, function(){ 
      //Set Variables 
      var container = $(".container"); 
      var project = $(".project"); 
      var popupWidth = container.find(".project img:first").width(); 
      var popupHeight = container.find(".project img:first").height()+35; 
      var windowWidth = document.documentElement.clientWidth; 
      var windowHeight = document.documentElement.clientHeight; 

      //Set popup dimensions 
      container.css("width" , popupWidth); 
      container.css("height" , popupHeight); 

      //Set popup CSS 
      container.css({"position": "absolute", "background": "#000", "top": (windowHeight/2) - (popupHeight/2) + "px", "left": (windowWidth/2) - (popupWidth/2) + "px", "z-index": "2" }); 
      project.css({"width": (popupWidth), "height": (popupHeight) }); 

    //Slideshow Image to hide rest 
      $(".container").each(function(){ 
      $(".project img", this).hide().filter(":first").show(); 
     }); 
    }); 
}); 

Answer 1

어쩌면 당신은 CSS { position: fixed } 찾는거야?