Need to close a div when it is click on it but should not close when inner div is clicked
To be more clear When you run the code ---- click 'show' in the page a div opens up with a gray background and another inner div with green background---onclick on gray background the div needs to close if we click on green div it should not close please help me out Thanks In advance.
I have a text 'show' onclick on show it open's up a div which is set to display=none and this div is set to overflow=hidden. Inside the div I have a another div with matter. This works fine but the issue is onclick of the main div which is set to display=none has to close when it is click in its area.
code:
<html>
<head></head>
<script language="javascript">
function toggle(tId) {
var ele = document.getElementById(tId);
ele.style.display = "block";
}
function cancelToggle(id,e)
{ var target = (e && e.target) || (event && event.srcElement);
var obj = document.getElementById('toggleText');
if(target!=obj){obj.style.display='none'}
}
</script>
<body>
<a id="displayText" href="javascript:toggle('toggleText');">show</a>
<div id="toggleText" style="display: none; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
bottom: 0; height: 100%; left: 0; overflow: hidden; position: fixed; right:100; top: 10; width: 100%;">
<div style="background: none repeat scroll 0 0 #80C5A9; display: block; height: 40%;
position:fixed; bottom: 0; overflow: hidden; width: 100%;">
<h1>Wel开发者_C百科come Naren</h1>
<label>Its good for u.All the best</label>
</div>
</div>
</body>
</html>
Does this work?
<html>
<head></head>
<script language="javascript">
function toggle(el) {
if ( el.id && el.style.display == 'block' ) {
el.style.display = 'none';
} else {
el.style.display = 'block';
}
}
function cancelToggle(id,e)
{ var target = (e && e.target) || (event && event.srcElement);
var obj = document.getElementById('toggleText');
if(target!=obj){obj.style.display='none'}
}
function stop() {
if (event.stopPropagation) {
event.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}
</script>
<body>
<a id="displayText" href="javascript:toggle(document.getElementById('toggleText'));">show</a>
<div onClick='toggle(this)' id="toggleText" style="display: none; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
bottom: 0; height: 100%; left: 0; overflow: hidden; position: fixed; right:100; top: 10; width: 100%;">
<div onClick='stop()' style="background: none repeat scroll 0 0 #80C5A9; display: block; height: 40%; position:fixed; bottom: 0; overflow: hidden; width: 100%;">
<h1>Welcome Naren</h1>
<label>Its good for u.All the best</label>
</div>
</div>
</body>
</html>
The other option is to examine event.target and see if the click came from inside the inner div.
加载中,请稍侯......
精彩评论