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>