jQuery 및 CSS 위치 요소가 화면 가운데에 표시됩니다.

Question

제목은 쉽게 들리지만, 틀림없이이를 보장합니다. 나는 http://sarahnwatson.com에 사이트를 가지고있다. About 및 Contact 탭을 클릭하여 열어 본 모달 창이 있습니다. 탭은 모두 왼쪽에있는 정렬되지 않은 목록에 있습니다. 모달 창은 열 예정인 탭 바로 아래에 코딩되어 있습니다.

필자가 알아낼 수없는 것은 jQuery 코드와 CSS 코드 사이에 다른 크기의 모달 윈도우를 화면 중앙에 배치하는 방법입니다. 그것들은 왼쪽에 위치한 요소 안에 있기 때문에 그 요소에 머물러 있습니다. JQuery와

ul.st_navigation{ 
    position:relative; 
    width:100%; 
    top:140px; 
    left:-300px; 
    list-style:none; 
} 
ul.st_navigation li { 
    float:left; 
    clear:both; 
    margin-bottom:8px; 
    position:relative; 
    width:100%; 
} 
ul.st_navigation li span.st_link{ 
    background: rgba(0,0,0,.8); 
    float:left; 
    position:relative; 
    line-height:50px; 
    padding:0px 20px; 
    -moz-box-shadow:0px 0px 2px #000; 
    -webkit-box-shadow:0px 0px 2px #000; 
    box-shadow:0px 0px 2px #000; 
} 
ul.st_navigation li span.st_arrow_down, 
ul.st_navigation li span.st_arrow_up{ 
    position:absolute; 
    margin-left:20px; 
    width:40px; 
    height:50px; 
    cursor:pointer; 
    -moz-box-shadow:0px 0px 2px #000; 
    -webkit-box-shadow:0px 0px 2px #000; 
    box-shadow:0px 0px 2px #000; 
} 
ul.st_navigation li span.st_arrow_down{ 
    background: rgba(0,0,0,.8) url(../images/icons/down.png) no-repeat center center; 
} 
ul.st_navigation li span.st_arrow_up{ 
    background: rgba(0,0,0,.8) url(../images/icons/up.png) no-repeat center center; 
} 
ul.st_navigation li span.st_modal{ 
    position:absolute; 
    margin-left:20px; 
    width:40px; 
    height:50px; 
    cursor:pointer; 
    -moz-box-shadow:0px 0px 2px #000; 
    -webkit-box-shadow:0px 0px 2px #000; 
    box-shadow:0px 0px 2px #000; 
    background: rgba(0,0,0,.8) url(../images/icons/modal.png) no-repeat center center; 
} 

그리고 여기에 있습니다 : : 여기

는 탭에 대한 CSS 및 모달 창입니다 다음과 같이

// Create a modal window 
       function createModal(elm) { 
        var $this = $(this); 
        var $body = $('body'); 
        var winHeight = $(window).height(); 
        var winWidth = $(window).width(); 

        $body.prepend('<div id="blackout">'); 
        $("#blackout").fadeIn(1000, function() { 

        $(elm).css({ left: '-9999px', display: 'block' }); 

         var modalHeight = $(elm).height(); 
         var modalWidth = $(elm).width(); 

         var offsetH1 = winHeight/2; 
         var offsetH2 = (winHeight-modalHeight)/2; 
         var offsetW = (winWidth-modalWidth)/2; 

         $(elm) 
         .css({ top:offsetH1, left:offsetW, height:'0px' }) 
         .animate({ top:offsetH2, height:modalHeight }); 



         }); 
        }); 

        }); 

       } 

       $list.find('.st_modal').live('click',function(){ 
        var $this = $(this); 
        hideThumbs(); 
        $this.closest('li').animate({ left: "0px" }, function() { 
         var $elem = $this.parent().next('div#modal_window'); 
         createModal($elem); 
        }); 
       }); 

HTML 구조는 다음과 같습니다

<ul id="st_nav" class="st_navigation"> 
       <li> 
        <span class="st_link">About<span class="st_modal"></span></span> 
        <div id="modal_window" style="width:600px;"> 
        <div class="about"> 
         <span class="line"><span class="left">Name: </span>Sarah Watson</span> 
         <span class="line"><span class="left">Age: </span>16</span> 
         <span class="line"><span class="left">Genre: </span>Folk, Pop, Alternative</span> 
         <span class="line"><span class="left">Bio: </span></span><br /> 
         I am 16yrs old and an aspiring singer/songwriter. I live in Northern California. My goals and ambitions in life are to someday have a popular song on the radio, whether I am singing it or someone else is. I love to hear just about any kind of music, learning something new is always fun! 
        </div> 
        </div> 
       </li> 
       <li> 
       <span class="st_link">Contact<span class="st_modal"></span></span> 
        <div id="modal_window" style="width: 450px;"> 
         <h2>Contact</h2> 
         <form id="contact_form" method="POST" action="#"> 
         <label>Name:</label><br /> 
         <input type="text" name="name" /><br /> 
         <label>Email:</label><br /> 
         <input type="text" name="email" /><br /> 
         <label>Reason:</label> &nbsp; 
         <label><input type="radio" name="reason" value="praise" checked='checked' /> Praise</label> <label><input type="radio" name="reason" value="booking" /> Booking</label><br /> 
         <label>Message:</label><br /> 
         <textarea name="name"></textarea><br /> 
         <input type="submit" value="Submit" name="submit" /> <span class="status_message"></span> 
         </form> 
        </div> 
       </li> 
      </ul> 

Answer 1

창에 대한 li의 상대적 위치를 찾고 모달을 변환합니다.

$this.closest('li').animate({ left: "0px" }, function() { 
var parentLiModalPos = $(this).position(); 
         var $elem = $this.parent().next('div#modal_window'); 
         createModal($elem, parentLiModalPos.top); 
        }); 


function createModal(elm, parentLiTop) { 
        var $this = $(this); 
        var $body = $('body'); 
        var winHeight = $(window).height(); 
        var winWidth = $(window).width(); 

        $body.prepend('<div id="blackout">'); 
        $("#blackout").fadeIn(1000, function() { 

        $(elm).css({ left: '-9999px', display: 'block' }); 

         var modalHeight = $(elm).height(); 
         var modalWidth = $(elm).width(); 

         var offsetH1 = winHeight/2; 
         var offsetH2 = (winHeight-modalHeight)/2; 
         var offsetW = (winWidth-modalWidth)/2; 

         $(elm) 
         .css({ top:offsetH1 - parentLiTop, left:offsetW, height:'0px' }) 
         .animate({ top:offsetH2, height:modalHeight }); 



         }); 
        }); 

        }); 

       } 

Answer 2

정확히 어디에 문제가 있을지 정확히 알 수는 없지만 센터링을위한 계산이 정확한 것처럼 보입니다.

나는 올바른 코드를 작성하고 다음 div에 모달을 만들지 않고 시작합니다. "modal_window"의 ID가 시작될 장소가됩니다. 같은 이름으로 둘 이상의 ID를 가질 수 없습니다 , 동일한 이름을 가진 두 개의 ID가있는 경우 ID에서 jQuery 함수를 사용하려고하면 예기치 않게 발생할 수 있습니다.

당신이 만드는 것이 훨씬 더 복잡합니다. li 요소 (또는 특히 li 내의 스팬)를 클릭하면 li 요소가 화면에서 왼쪽으로 움직이기를 원할 때 화면의 왼쪽에 li 요소가 있습니다. 화면으로 모달.

각 모달에 대해 uniqe id를 사용하여 div를 만들고 애니메이션에 적용하려는 li 요소의 구조 내부에 해당 모달을 두지 말아야합니다. 즉, 애니메이션에 적용하려는 모달의 부모이기도합니다 다른 방향. 이제는 모달이 li 요소 안에 있으므로 버튼 모 (및 모달 부모)와 모달이 다르게 움직이지만 모달은 버튼 부모 안에 있습니다.