Я пытаюсь создать простой эффект popover, используя jquery, похожий на popover в iOS. Код отлично работает в ff, safari, chrome и ie9, но всплывающее окно не появляется в ie6-8.
Я использую jquery 1.5.1, а также html5shiv, чтобы я мог использовать теги html5:
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
<script defer src="jquery.min.js"></script>
<script defer src="effects.js"></script>
Соответствующий код JavaScript:
$(document).ready(function() {
$('#button').live('click', function($e) {
$e.preventDefault();
$('#popover').fadeToggle('fast');
if ($('#button').hasClass('active')) {
$('#button').removeClass('active');
} else {
$('#button').addClass('active');
}
});
});
Соответствующий код CSS для всплывающего окна:
#popover {
display: none;
position: absolute;
top: 43px;
left: 5px;
z-index: 5000000;
}
IE правильно добавляет и удаляет классы, когда я нажимаю на кнопку. Кроме того, когда я меняю CSS всплывающего окна для отображения: блок, тогда всплывающее окно корректно отображается при загрузке страницы в IE. Однако по какой-то причине IE, кажется, не может переключать отображение div. Я попытался поместить код javascript внизу страницы, добавив type = "text / javascript", изменив fadeToggle, чтобы просто показать, используя getElementById, чтобы изменить CSS popover, и я думаю, что любое другое решение, которое я видел на здесь, связанные с IE и jquery, click (), live () и / или z-index.
Есть идеи?