Сочетание всплывающих окон и кликов - PullRequest
Новая
       13

Сочетание всплывающих окон и кликов

1 голос
/ 13 июня 2011

Прямо сейчас у меня есть очень простая всплывающая функция onClick для установки Visible для определенных div'ов на основе ID: 

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

и html: 

<a onclick="setVisibility('popup1', 'block');">
<div id="popup1">Content<a onclick="setVisibility('popup1', 'none');"></div>

Что я хочу сделать, этодобавьте к этому простое fadeIn (и, возможно, постепенное исчезновение).

Все, что мне удастся сделать самостоятельно, - это установить конкретные теги в сценарии ... но в проекте, над которым я работаю, будут десяткиИдентифицируйте конкретные всплывающие окна, чтобы вы могли видеть, как это может запутаться.

Если кто-то может помочь получить представление о скрипте выше, я был бы признателен.Спасибо!

Ответы [ 2 ]

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

Если вы просто хотите добавить / удалить элемент, вам не обязательно использовать jQuery.Вы можете заменить следующие вызовы функций fadeIn и fadeOut для функции setVisibility в вопросе. 

function setOpacity(id,value) {
    var obj = document.getElementById(id);
    obj.style.opacity = value;
    obj.style.filter = 'alpha(opacity=' + value*100 + ')';    // lte IE8
}

function fadeIn(id) {
    for (var i=0; i<1; i+=0.1) {
        setTimeout('setOpacity("'+id+'",'+i+')',(i*10)*100);
    }
}

function fadeOut(id) {
    for (var i=0; i<1; i+=0.1) {
        setTimeout('setOpacity("'+id+'",'+i+')',((1-i)*10)*100);
    }
}

Возможно, вы захотите изменить функцию setOpacity, если хотите, чтобы элемент былполностью скрыт (т. е. display:none), когда непрозрачность достигает 0.

Однако, в его нынешнем виде код довольно навязчив, с событиями, назначенными встроенными в HTML.Если JavaScript по какой-либо причине недоступен, страница может сломаться или выглядеть в лучшем случае сумбурно / запутанно.Это следует сделать ненавязчивым , назначив поведение / события при загрузке страницы.Тогда вы, вероятно, можете избежать явной передачи идентификаторов элементов при первоначальном вызове события.

0 голосов
/ 13 июня 2011

Использование .fadeIn(). 

$("#popup1").fadeIn("slow");

Подробнее здесь: http://api.jquery.com/fadeIn/

...