Popup personalizado no lugar do menu de contexto

[Julio Cavallari 3]

Como eu faço pra quando o usuário clicar com o botão direito do mouse no meu site, impedir o menu de contexto de ser exibido, e exibir um popup no exato local do clique?

[araorn 0]

eu achei isso, espero que ajude

https://www.computerhope.com/j20.htm

[Julio Cavallari 3]

Então, eu queria que ao invés do menu, o que aparecesse fosse isso, fazer aparecer eu até consigo, deixando a div fixa, mas escondida,e quando o usuário disparasse o evento, ela ficasse visivel, mas eu queria que ela só fosse criada no momento que o evento fosse disparado e aparecesse no local exato onde o clique direito foi efetuado, e não num local fixo.

<div class="popup_botão_direito">&copy Julio Cavallari</div>

.popup_clique_direito {
    position: absolute;
    display: inline-block;
    padding: 10px;
    font-size: 12px;
    color: #fafafa;
    background-color: rgba(0,0,0,.76);
    border-radius: 5px;
}

 

[araorn 0]

deixa a div com width e height 100%, e em seguida deixa as outras div com index-z maior do que dessa div pra ela ficar por fundo das outras.

[marsolim 110]

montei mais ou menos as pressas aqui acho que deva funfar talvez precisando alguns ajustes

 

no css

#menu{
    display: none;
    width: 200px;
    height: 300px;
    position: absolute;
}

 

no html

<div id='menu'>
    <!-- menu aqui -->
</div>

 

jQuery

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<script>

    $('html').contextmenu(function(e){
  
        var max_top = $(window).scrollTop() + $(window).height() - $('#menu').outerHeight();
        var max_esq = $(window).scrollLeft() + $(window).width() - $('#menu').outerWidth();
        var menu_top = e.pageY;
        var menu_esq = e.pageX;
  
        if(e.pageY > max_top){
            menu_top = max_top - ($(window).height() - $(window).scrollTop());
        }
  
        if(e.pageX > max_esq){
            menu_esq = max_esq;
        }
  
        $('#menu').css('display', 'inline-block');
        $('#menu').css('top', menu_top + 'px');
        $('#menu').css('left', menu_esq + 'px');

        return false;

    });

    $('body').click(function(){
        $('#menu').css('display', 'none');
    });

</script>

 

dica - melhor construir a div normalmente e deixar ela oculta mas se quieres meter lhe ela no js é só criar uma var menu por exemplo e escrever o mesmo que escreveria no html só que vai ter que escapar aspas e coisas que tais por isso que digo que é melhor fazer ela normalmente

[Julio Cavallari 3]

Funcionou perfeitamente, muito obrigado

 

Caso eu queria fazer a div ser escondida no scroll tbm, é só adicionar isso?

$('body').scroll(function(){
     $('#menu').css('display', 'none');
});