Устранение неполадок модального окна JQuery - PullRequest
Новая
       5

Устранение неполадок модального окна JQuery

0 голосов
/ 09 июля 2011

Я использую следующий код JQuery для загрузки модального окна iframed. Почти все работает как положено. Когда модальное окно загружается впервые, анимация окна (скольжение вниз) не работает - окно просто появляется без какого-либо эффекта перехода. После этого все работает нормально (скользите вниз и вверх). Если я ухожу со страницы и загружаю ее снова, анимация снова не работает с первого раза. Я не могу понять, почему? Вы можете помочь?

Вот мой код: 

var md_done = false;
var md_height = 400;
var md_width = 400;

function md_show(caption, url, height, width) {
    md_height = height || 400;
    md_width = width || 400;
    if (!md_done) {
        $(document.body).append("<div id='md_overlay'></div><div id='md_window'><div id='md_caption'></div>" + "<div class='md_window' alt='close'></div></div>");
        $("#md_window .md_window").click(md_hide);
        $("#md_overlay").click(md_hide);
        $(window).resize(md_position);
        md_done = true;
    }

    $("#md_frame").remove();
    $("#md_window").append("<iframe id='md_frame' src='" + url + "' frameBorder='0' allowtransparency='true'></iframe>");

    $("#md_caption").html(caption);
    $("#md_overlay").fadeIn('slow');
    // scroll to top on show modal
    $('html, body').animate({
        scrollTop: 0
    }, 'slow');
    md_position();

    if (md_animation) $("#md_window").slideDown("slow");
    else $("#md_window").fadeIn('slow');
}

function md_hide() {
    $("#md_window").slideUp("slow");
    $("#md_overlay").fadeOut('slow');
}

function md_position() {
    var de = document.documentElement;
    var w = self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
    $("#md_window").css({
        width: md_width + "px",
        height: md_height + "px",
        left: ((w - md_width) / 2) + "px"
    });
    $("#md_frame").css("height", md_height - 32 + "px");
}

Вот как я это создаю: 

<script type="text/javascript">
// DECLARE MODAL ANIMATION
var md_animation = true;
$(document).ready(function() {
    // MODAL - CONTACT FORM
    $("a.modal").click(function () {
        var x = this.title || $(this).text() || this.href;
        md_show(x, this.href, 450, 690);
        return false;
    });

});

1 Ответ

0 голосов
/ 09 июля 2011

Добавьте display: none; к <div id='md_overlay'> и посмотрите, происходит ли это по-прежнему.

...