JQuery hide() show() не работает Internet explorer 10

Question

У меня проблема с jquery hide() и show() в Internet explorer 10. Мне нужно всплывающее окно для баннера, который я создаю , при нажатии на левый нижний угол div будет отображаться, когда div вверх и щелчок в верхнем правом углу div скроется.

Эта работа на современном браузере, но не в интернет-проводник 10.

HTML

<div id="banner"> 
<button class="show"></button> 
<div id="modal"> 
<button class="hide"></button> 
</div> 
</div> 

CSS

#banner { 
width: 468px; 
height: 240px; 
border: solid 1px black; 
position: absolute; 
overflow: hidden; 
cursor: pointer; cursor: hand; 
} 

#modal { 
width: 468px; 
height: 240px; 
display: none; 
position: absolute; 
z-index: 9999; 
background-color: red; 
} 

.show { 
width: 80px; 
height: 35px; 
bottom: 0px; 
position: absolute; 
z-index: 12; 
} 

.hide { 
right: 0px; 
top: 0px; 
width: 50px; 
height: 50px; 
position: absolute; 
z-index: 12; 
} 

Jquery

$(document).ready(function(){ 
$(".hide").click(function(){ 
    $("#modal").hide(); 
}); 
$(".show").click(function(){ 
    $("#modal").show(); 
}); 
}); 

EDIT - проблема решена Похоже, вы не можете щелкнуть пустые теги (только указанную ширину/высоту) в IE 10 и ниже, поэтому мне пришлось заполнить его цветом трансперсонала (rgba 0,0,0,0.001).

Я также понял, что это можно сделать без jquery, duh.

Answer 1

Вы всегда можете использовать ванильный JS, и сделать что-то вроде

document.getElementById('modal').style.display = 'block'; 

и

document.getElementById('modal').style.display = 'none; 

Этот способ также является более эффективным, чем производительность происходит через объект JQuery.

Answer 2

Скрыть и показать методы Jquery переключает отображение свойств CSS на none/block для применяемого HTML-тега. Так возникает вопрос о совместимости. Просто исправьте ошибку на консоли браузера (F12), если она есть (я увидел один объект без ссылок) и повторите попытку. Также проверьте режим браузера, в котором вы работаете. (F12).