Элемент положения jQuery и CSS в центре экрана - PullRequest
Новая
       10

Элемент положения jQuery и CSS в центре экрана

0 голосов
/ 08 октября 2011

Название звучит легко, но я гарантирую, что это не так. У меня есть сайт по адресу http://sarahnwatson.com.. У меня есть модальные окна, которые я могу открыть, нажимая на вкладки О нас и Контакте. Все вкладки находятся в неупорядоченном списке, который расположен слева. Модальное окно закодировано непосредственно под вкладкой, которая должна его открывать.

То, что я не могу понять, это то, как между моим кодом jQuery и моим кодом CSS расположить модальные окна разных размеров в центре экрана. Поскольку они находятся внутри элемента, который расположен слева, они пытаются остаться в этом элементе.

Вот CSS для вкладок и модального окна: 

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;
}

А вот и jQuery: 

// 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>

Ответы [ 2 ]

1 голос
/ 08 октября 2011

Найдите относительную позицию 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 });



                        });
                    });

                    });

                }
0 голосов
/ 08 октября 2011

Я не могу точно определить, где именно проблема, но похоже, что вычисления для центрирования верны.

Я бы начал с написания правильного кода, а не пытался создать модал в следующем div, где будет начинаться идентификатор "modal_window", так как вы НЕ МОЖЕТЕ иметь более одного идентификатора с одинаковым именем, и попытка использовать функции jQuery для идентификатора может быть проблематичной, если есть два идентификатора с одинаковым именем.

Вы делаете это намного сложнее, чем должно быть. У вас есть элемент li с левой стороны экрана, когда вы щелкаете по этому элементу li (или, точнее, по промежутку внутри li), вы хотите, чтобы элемент li анимировался влево от экрана, и в то же время анимирует модальный в экран.

Вы должны создать div с уникальным идентификатором для каждого модала, и НЕ РАЗМЕЩАТЬ эти модалы внутри структуры для элемента li, который вы пытаетесь анимировать, который также является родителем модала, который вы пытаетесь анимировать в другом. направление. Теперь так, ваши модалы находятся внутри элементов li, и это делает все намного сложнее, поскольку родительский элемент кнопок (а также родительский элемент модалов) и модальный объект анимируются по-разному, но модальный объект находится внутри родительского элемента кнопок.

...