I am trying to write a widget which will show up on button click. This is a jQuery representation of what I want to achieve. jQuery (This is not my code. Found this one on net) I am not sure how to go on with the development. Should the directive needs to an element or an attribute or something else. I have not tested this as I am not sure about going on about this. This is how I planned to do.
angular.module('common').directive('shareModal',function (){
return {
restrict: 'E',
show: '=',
transclude: true,
replace: true,
template: '',
link: function (scope, elem, attrs) {
$(elem).click (function() {
var $this = $(this);
$("#background").css({
"opacity": "0.3"
}).fadeIn("slow");
$("#large").html(function() {
$('.ttip').css({
left: $this.position() + '20px',
top: $this.position() + '50px'
}).show(500)
}).fadeIn("slow");
$('.note').on('click', function() {
$('.ttip').hide(500);
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
});
$("#large").click(function() {
$(this).fadeOut();
})
})
}
}});
Thanks in advance.
Update: The Custom Popover is what I am trying to achieve. Custom Popover