JSFiddle - React, Tailwind, and code Playground

by Uday Hiwarale

HTML

<div>
    right click on me
</div>

CSS

body {
    width:100%;
    height:100%;
}
div {
    background-color:#eee;
    height:600px;
}

JavaScript

$.fn.copynote = function (options) {
    var defaults = {
        msg: '&copy; This image is copyrighted.',
        bgColor: '#000',
        fs: '12px',
    };
    var newOptions = $.extend({}, defaults, options);

    return this.each(function () {
        var $this = $(this);
        $this.css('position', 'relative');

        $this.on('contextmenu', function (e) {
            if (!$this.find("#copynote").length) {
                e.preventDefault();
                var x = e.pageX;
                var y = e.pageY;
                var container = '<span id="copynote" style="position:absolute; display:inline-block; padding:2px 5px; border-radius:2px; margin:2px; top:' + y + 'px; left:' + x + 'px; color:' + newOptions.color + ';  background-color:' + newOptions.bgColor + ';  font-size:' + newOptions.fs + ';">' + newOptions.msg + '</span>';
                $this.append(container);
                setTimeout(function () {
                    $this.find("#copynote").fadeOut().remove();
                }, 3000);
            } else {
                e.preventDefault();
            }
        });
    });
}

$('div').copynote({
    msg: '&copy; This image is copyrighted to Uday.',
    color: '#fff',
    bgColor: '#ff5757',
    fs: '14px',

});