Показать сообщение отдельно
  #2 (permalink)  
Старый 12.06.2013, 20:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

fatalstrike,
Вариант...
<!DOCTYPE HTML>
<html>

    <head>
        <title>Untitled</title>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <style type="text/css">
            <!-- .box {
                display: block;
                width: 100px;
                height: 100px;
                background: gray;
            }
            .popup {
                display: none;
                position: fixed;
                top: 20%;
                left: 40%;
                width: 200px;
                height: 100px;
                background: gray;
                padding: 10px;
            }
            -->
        </style>
    </head>

    <body>
        <div class="box"></div> <a href="#" id="link1">link1</a>
        <br> <a href="#" id="link2">link2</a>

        <div class="popup">
            <p>text</p>
            <button id="button">COLOR!</button>
            <button id="close">Close this</button>
        </div>
        <script>
            (function ($) {
                $.fn.test = function (options) {
                    options = $.extend({
                        'color': '#777',
                        'myclick': function () {}
                    }, options);

                    var $this = this;
                    var color_btn = $("#button");
                    var popup = $('.popup');


                    $.each($this, function () {
                        $(this).click(function () {
                            popup.css('display', 'block');
                            popup.find('p').text('Квадрат должен окрасится в цвет: ' + options.color);
                            color_btn.click(function () {
                                popup.css('display', 'none');
                                var color = options.color;
                                options.myclick.call($this, color);
                            });
                        })


                    });

                }
            })(jQuery);

            $('#close').click(function () {
                $(this).parent().css('display', 'none');
            });

            $('#link1').test({
                color: 'red',
                myclick: function (color) {
                    $('.box').css('background', color);
                }
            });


            $('#link2').test({
                color: 'green',
                myclick: function (color) {
                    $('.box').css('background', color);
                }
            });
        </script>
    </body>

</html>
Ответить с цитированием