Jquery hide () show () does not work internet explorer 10 (solved)

I've got a problem with jquery hide() and show() on internet explorer 10. I need a pop-up window for a banner I'm making, when clicking left bottom corner a div will show, when div is up and clicking on top right corner div will hide.

This work on modern browser, but not in internet explorer 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 - problem solved It appears you cannot click empty tags (only specified width/height) in IE 10 and below, so I had to fill it with a transperant color (rgba 0,0,0,0.001).

I also realized it could be done without jquery, duh.


You can always use vanilla JS, and do something like

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

and

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

This way is also more performance efficient than going through a jQuery object.