наведите курсор на кнопку, чтобы получить параметры в модальном поле, как Google Plus - PullRequest
Новая
       1

наведите курсор на кнопку, чтобы получить параметры в модальном поле, как Google Plus

1 голос
/ 01 июля 2011

Для тех из вас, кто видел Google Plus, вы, должно быть, заметили, что при наведении курсора на кнопку «Добавить в круги» вам автоматически предоставляется модальное поле типа div, которое содержит все ваши круги в флажках, и вы можетепросто нажмите тот, который вы хотите.

Есть ли пример того, как сделать это, используя css / jquery ... или, может быть, что-то похожее на это?

или в каком-то объяснении, как это будет сделано?

1 Ответ

3 голосов
/ 01 июля 2011

Вот пример того, как это сделать: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...