Всплывающие окна в jQuery - PullRequest
Новая
       9

Всплывающие окна в jQuery

2 голосов
/ 16 декабря 2011

У меня был код, который как-то работал, но теперь, когда я пытаюсь внезапно переписать свои сценарии, я получил неправильные позиции X и Y во всплывающем окне. Это первая проблема.

Следующая проблема в том, что этот код довольно плохой, потому что у меня всегда были ошибки при отображении всплывающих окон. Это сложно объяснить, лучше взгляните на код.

Главное: есть элемент (скажем, картинка), когда при наведении мыши мне нужно, чтобы окно отображалось, когда моя мышь находится над окном. Другими словами - я должен быть в состоянии скопировать некоторую информацию из этого окна. Итак, я написал код, но он довольно глючный, и теперь, за исключением ошибок, я получил неправильные позиции X и Y. Посмотрите: 

    $(".infoBox").die();
$(".infoBox").live('mouseover mouseout', function(e) {
    if (e.type == 'mouseover') {
        $("#infoBox").html("");
        $("#infoBox")
          .css('top', (e.pageY - 10) + 'px')
          .css('left', (e.pageX - 20) + 'px');

        setTimeout(showInfoBox, 500);

        ID = $(this).attr('id');    

        if ($(this).hasClass("companyInfo"))    { showCompanyInfo(ID); }
        if ($(this).hasClass("userInfo"))       { showUserInfo(ID);    }

    } else {
        setTimeout(hideInfoBox, 1000);
    }
});

function showInfoBox() {
    $("#infoBox").fadeIn('slow');
}

function hideInfoBox() {
    if (mouse_in_infoBox == 0) {
        $("#infoBox").hide();
        $("#infoBox").html("");
    }
};

$("#infoBox").hover(
    function() {
        mouse_in_infoBox = 1;
    },
    function() {
        mouse_in_infoBox = 0;
        setTimeout(hideInfoBox, 1000);
    }
);

Так у меня есть, например 

<img class="infoBox" id="company_id_which_was_dynamically_added">

и showCompanyInfo имеет 

"$("infoBox").html(...)".

В моем index.php я получил, и CSS это: 

#infoBox {
display: none;
position: absolute;
border: 1px solid #CDFF00;
background-color: #1C1F1A;
color: #CCCC33;
padding: 10px;
z-index: 5;
max-width: 400px;
min-width: 50px;
min-height: 50px;
}

Ах, да, другой вопрос связан с методами жизни и смерти. На моем сайте много вкладок, и когда я переключаю их, я помещаю обработчики, такие как .click / .hover, в некоторые элементы. И здесь я использую метод .live, потому что мои вкладки используют ajax. Но когда я переключаю вкладки несколько раз, я получаю несколько обработчиков, например, если я показываю лайтбокс, я получаю несколько лайтбоксов. Сейчас я использую .die () перед .live (), но кажется, что это совсем не хорошее решение ...

Я буду очень признателен за любую помощь, потому что я пытался сделать эти всплывающие окна несколько раз и всегда получал некоторые ошибки. В моем коде выше, если вы будете двигать мышкой, у вас будут пустые окна и другие плохие вещи.

Заранее спасибо!

1 Ответ

0 голосов
/ 20 января 2012

Есть несколько вещей, которые кажутся здесь неправильными, но трудно точно сказать, что происходит, не видя больше вашего кода и не получая больше информации. Какую версию jQuery вы используете, с какими браузерами у вас проблема, и существует ли проблема во всех браузерах или только в определенных?

Согласно веб-сайт jQuery live () устарел с версии 1.7, и вместо него следует использовать обработчик события on () . Возможно, ваши проблемы связаны с использованием живого обработчика.

Еще одна вещь, которая может решить ваше неверное значение pageX, это проверить, что e.pageX на самом деле является целым числом (возможно, используйте parseInt (e.pageX, 10), чтобы убедиться, что это целое число). У меня были странные проблемы с переменными, которые должны быть целыми числами, но по какой-то причине оказались строками. Теперь я должен объявить все целые числа как целые (используя parseInt ()) и не разрешать JavaScript самостоятельно принимать решения.

Также эта часть вашего кода не имеет никакого смысла: 

$("#infoBox").hover(
    function() {
        mouse_in_infoBox = 1;
    },
    function() {
        mouse_in_infoBox = 0;
        setTimeout(hideInfoBox, 1000);
    }
);

Значение mouse_in_infoBox всегда будет равно 0.

Другая проблема, которую я вижу, состоит в том, что у вас есть несоответствия с вашими селекторами для infoBox. Является ли infoBox классом $ ('. InfoBox') или идентификатором $ ('# infoBox')? Исходя из кода, который вы дали нам выше, у вас есть много неправильных селекторов. Любая ссылка на infoBox должна быть $ ('. InfoBox'), а не $ ('# infoBox'). Также ваш CSS относится к id #infoBox, поэтому не уверен, намеренно это или нет.

Надеюсь, это поможет.

...