Блог

Главная - Вопросы по программированию - удаление всплывающих окон javascript и css

удаление всплывающих окон javascript и css

#javascript #html #css #popup #fadeout

#javascript #HTML #css #всплывающее окно #исчезновение

Вопрос:

Я создаю всплывающее сообщение о том, что когда оно установлено на style.display = "block"; (нажатием кнопки), оно станет невидимым. У меня есть кнопка во всплывающем окне, которая скрывает всплывающее окно, установив style.display = "none"; , как я могу заставить его исчезнуть?

вот css

 #note {
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    overflow: hidden; 
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}
@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-50px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-50px); }
    10%, 90% { -moz-transform: translateY(0px); }
}
.cssanimations.csstransforms #note {
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
    -moz-transform:    translateY(-50px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}
.cssanimations.csstransforms #close {
    display: none;
}

вот javascript

 <script>
    close = document.getElementById("close");
    close.addEventListener('click', function() {
        note = document.getElementById("note");
        note.style.display = 'none';
    }, false);
</script>

и вот html

 <div id="note" style="display: none;">
    Form has been sent. If you would like to fill out another suggestion, feel free but remember that there is an Anti-spam system running. <a id="close">[close]</a>
</div>

Комментарии:

1. свойство отображения не анимируется. Поэтому вам нужно будет установить display:none , когда заканчивается переход. Используйте javascript для перехвата события transitionend.

2. Вы пробовали использовать jquery? Это намного проще.

Ответ №1:

Используйте jQuery, потому что это намного проще, скачать можно здесь, нажмите здесь. Включить jquery.js и напишите свой код в <script> тегах.

Чтобы показать всплывающее окно, используйте,

 $("#btn_id").click(function(e){
    $('#note').fadeIn();
});

Чтобы скрыть всплывающее окно, используйте,

 $("#close").click(function(e){
    $('#note').fadeOut();
});

Ответ №2:

Свойство отображения CSS не имеет «скрытого» значения (вероятно, вы допустили ошибку). Вы должны установить для него значение «нет». Затем вы должны указать переход для свойства отображения для #note в css, например

 #note {
    display: block;
    -webkit-transition: display 2s; /* For Safari 3.1 to 6.0 and don't forget other browsers */
    transition: display 2s;
}

затем в JS все, что нужно сделать, это просто установить для свойства отображения значение «нет»:

 document.getElementById("close").onclick(function () {
    document.getElementById('note').style.display = 'none';
});

Если вы используете переходы CSS, вам следует проверить список совместимости с браузером. В качестве возможного обходного пути вы можете попробовать свойство видимости CSS (от ‘visible’ до ‘hidden’).

Но это неправильный путь, потому что отображение и скрытие не дадут вам плавного исчезновения. Попробуйте свойство opacity, а затем скройте всплывающее окно, установив значение display равным none, когда переход завершен.

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

Метки: