Close button on div is not working
I have a set of divs I would to show on a click and then close with an "X" img on the top right hand corner. My problem is that clicking anywhere within the div causes it to close, not just the X in the upper right hand corner. I would also like to make the "X" a link so when it's hovered over the cursor changes. Code below, thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style type="text/css">
.county{
color:blue;
display:block;
}
.countystats{
background-image:url('../defunkt-facebox-cbe32e1/examples/closelabel.png') ;
background-position:top right;
border:3px black inset;
background-repeat:no-repeat;
background-color:#ccc;
display:none;
right:250px;
margin: 5px 5px 5px 5px;
padding:5px 5px 5px 5px;
width:200px;
}
</style>
</head>
<body>
<div style="height:250px;bottom:300px; width:100px; padding: 1em; overflow:auto; margin:5px 5px 5px 5px; border: 2px black; overflow-x:hidden;">
<a class="county" href="#">one</a>
<a class="county" href="#">two</a>
<a class="county" href="#">three</a>
<a class="county" href="#">four </a>
<a class="county" href="#">five</a>
<a class="county" href="#">six</a>
</div>
<div class="countystats">stats one<input maxlength="20" size="14" type="password"/><br/><p>woot</p></div>
<div class="countystats">stats two</div>
<div class="countystats">stats three</div>
<div class="countystats">some other stuff&开发者_运维百科lt;/div>
<div class="countystats">even more other stuff</div>
<br />
<br />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$('a.county').each( function(e){
$(this).bind('click', function(e){
var thisIs = $(this).index(); $('.countystats').eq(thisIs).show (250);
});
$("img").hide();
$(".countystats").click(function () {
$(this).hide(250);
return true;});
});
</script>
</body>
</html>
It's behaving that way because you're choosing the entire div by selector. Instead, add a nested div set to the size of the X image, float it to the right, and bind the close event to that. If you use a float or relative positioning you should be able to avoid messing up the rest of the layout.
Edit: Even better, try the jqueryUI dialog widget. It does more or less exactly what you want and it handles the closing functionality automagically.
You can identify where the click occurred inside the element, and if matching the location of the close region hide the element.
Code for this would be:
var _closeButtonWidth = 50;
var _closeButtonHeight = 20;
$(".countystats").click(function(event) {
event = event || window.event;
var xPos = event.offsetX || event.clientX - $(this).offset().left;
var yPos = event.offsetY || event.clientY - $(this).offset().top;
var width = $(this).width();
var height = $(this).height();
if (xPos >= (width - _closeButtonWidth) && yPos <= (height - _closeButtonHeight)) {
$(this).hide();
}
});
Just define the width and height of the X icon and it should work.
Live test case: http://jsfiddle.net/nmEB6/1/
(Tested on Chrome 10, Firefox 3.6 and IE8 just click the top right corner of the green div)
加载中,请稍侯......
精彩评论