I’m trying to switch to pure javascript from jQuery. The code below shows my progresses so far:
HTML
<div id=content>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ...
</div>
<button id=button>Test</button>
JS
var content = document.getElementById('content')
, button = document.getElementById('button')
;
var showContent = function() {
content.style.display = 'block';
};
button.addEventListener('click', showContent, false);
window.addEventListener('mouseup', function() {
content.style.display = 'none';
});
CSS
body {
position: relative;
z-index: 100;
}
#content {
position: absolute;
z-index: 1000;
width: 250px;
min-height: 150px;
height: 100% !important;
display: none;
left: 150px;
top: 50px;
border: 1px solid #ccc;
}
The problem: the ‘content’ div disappears when I click on itself. I want it to remain showing until I click on anywhere else.
Thank you,