hover on a button to get options in a modal box like google plus
For those of you who have seen google plus you must have noticed that when you hover on the "Add to circles" button, you are automatically presented with a 开发者_开发问答modal box type of div that contains all your circles in checkboxes and you can just click the one you want.
is there an example of how to do this using css/jquery...or perhaps something similar to it?
or in some explanation, how would it be done?
Here is an example on how to do:
<!DOCTYPE HTML>
<html>
<head>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
var aa;
$(document).ready(function() {
$(".addContainer").mouseenter(function() {
$(".addCircles").animate({height : 200});
});
$(".addContainer").mouseleave(function() {
$(".addCircles").animate({height : 0});
});
$(".addCircles input[type=checkbox]").change(function(e){
alert($(this).attr("id")+": "+($(this).attr("checked") == "checked" ? "checked" : "unchecked"));
});
});
</script>
</head>
<body>
<div class="addContainer" style="position: relative; width: 120px;">
<div class="add" style="cursor: pointer;">Add to Circles</div>
<div class="addCircles" style="height: 0; position: absolute; overflow: hidden;">
<ul style="list-style: none;">
<li><input type="checkbox" id="circle1" />Circle 1</li>
<li><input type="checkbox" id="circle2" />Circle 2</li>
<li><input type="checkbox" id="circle3" />Circle 3</li>
</ul>
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论