Пользовательский «всплывающий» jQuery не отображается в IE8

Question

(Сайт будет опубликован очень скоро, помогите как можно скорее!)

Итак, я создал всплывающее окно (не настоящий модал, а просто скрытый div, который отображается с помощью jQuery и снова скрывается при закрытии). Он корректно отображается в последних версиях Safari, Firefox и Chrome, а также IE9. Но в IE8 это как если бы div даже не существовал.

Вот jQuery:

    permalinkBehavior: function(){
$('a[name=permalink]').click(function(event) {
    $('.permalink_overlay').hide();
    $(this).next('.permalink_overlay').show();
    $(this).parent().find('input[type=text]').focus();
    $(this).parent().find('input[type=text]').select();
    return false;
    });
    $(".permalink-cancel").click(function() {
        $(this).parent('.permalink_overlay').hide();
        $(this).parent().find('input[type=text]').blur();
        });
    },

Класс .permalink_overlay - это div с css display: none; (сценарий заботится о том, чтобы показывать и скрывать элемент div при нажатии на ссылку) и относительно позиционироваться на содержащий

, который находится внутри тегов. Мы используем обычные взломы IE, включая HTML5Shiv, Selectivizr и условные загрузки для загрузки. Также убедился, что родительский элемент hasLayout и содержащие элементы имеют позицию: относительный.

Нужно решить эту проблему, чтобы мы могли обнародовать. Будем весьма благодарны за любые советы или известные обходные пути.

Answer 1

Попробуйте это

<script type="text/javascript" language="javascript">
    $(function() {
        $('a[name=permalink]').click(function(event) {
            $('.permalink_overlay').hide();
            $(this).next('.permalink_overlay').show();
            $(this).parent().find('input[type=text]').focus();
            $(this).parent().find('input[type=text]').select();
            return false;
        });
        $(".permalink-cancel").click(function() {
            $(this).parent('.permalink_overlay').hide();
            $(this).parent().find('input[type=text]').blur();
        });

    });
</script>

<style type="text/css">
    .permalink_overlay
    {
        display: none;
    }
</style>

---

<div>
    <a href="#" name="permalink">overlay</a>
    <div class="permalink_overlay">
        <input type="text" value="name" /><a href="#" class="permalink-cancel">Cancel</a>
    </div>
</div>