Дисплей: нет; отображает "нет" в браузере

Этот пример jsFiddle работает в Google Chrome, но в Internet Explorer, после нажатия на значок закрытия браузер удаляет всплывающий элемент, но приводит к тому, что в окне браузера отображается текст "none". Пожалуйста, объясните, как я могу решить эту проблему.

HTML:

<div id="popup">
    <!-- Close popup link -->
    <a href="javascript:document.getElementById('popup').style.display='none';">X</a>
</div>

Ответ 1

Использовать onclick для обработчика событий вместо href http://jsfiddle.net/AE2X3/4/

<div id="popup">
        <a href="#" onclick="document.getElementById('popup').style.display='none';return false;" id="close_popup"></a>
        <p>This is a pop-up.</p>
</div>

Ответ 2

Я думаю, что происходит то, что присваивание возвращает его результат, и браузер показывает это. Если вы добавите void(0) в конец вашего JavaScript, он не будет отображаться.

Позвольте мне добавить, что amit_g answer является более правильным, чем мой. Он правильно указывает, что такое поведение принадлежит обработчику OnClick, а не атрибуту href.

Ответ 3

Это работает:

<div id="popup">
        <a href="javascript:void(0);" onclick="this.parentElement.style.display='none';" id="close_popup"></a>
        <p>This is a pop-up.</p>
</div>

Демо