CODEWITHSUNDEEP
jqueryhtmlcss
Zandorf
Zandorf

Reputation: 789

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?

Upvotes: 1

Views: 865

Answers (1)

Raphael Petegrosso
Raphael Petegrosso

Reputation: 3870

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>

Upvotes: 3

Related Questions