使用Bootstrap制作右键单击自定义菜单

我们可以轻松地通过右键单击创建一个漂亮的自定义菜单。

让我们创建一个div右键单击启用自定义菜单。

Right Click here

要防止默认右键单击菜单，我们需要在head标记中添加以下代码：

$(document).ready(function () {
$("#dv_rc").bind('contextmenu', function (e) {
e.preventDefault(); // prevents default menu 
});
});

现在，我们需要为右键菜单制作一个面板：

        
Right Click Window
        

          
                

                    Color

                    
                
          
        
        

    

请注意style="display:none;"。这背后的原因是在右键单击之前不显示。

现在我们需要在右键单击显示它。

我们在之前添加的jquery中添加了一行代码，以修改CSS，使其显示并定位在单击的右下方。

$("#dv_rc").bind('contextmenu', function (e) {
e.preventDefault(); // prevents native menu from being shown
 $("#popupRC").css({ position: "absolute", top: e.pageY, 
left: e.pageX, display: "block" });
});

现在添加一些代码，点击close面板按钮关闭此窗口。

完整代码如下：

    自定义右击菜单
    

    
    

    
    
	
        $(document).ready(function () {

            $("#dv_rc").bind('contextmenu', function (e) {
                e.preventDefault(); // prevents default menu 
               
                $("#popupRC").css({ position: "absolute", top: e.pageY, left: e.pageX, display: "block" });

            });
         
        });
     
        
    



Right Click here 

    
   
    
    

        
Right Click Window
        
          
                

                    Color

                    
                
          
        
        

    

 

原文地址：https://www.codeproject.com/Tips/1172961/Custom-Menu-With-Right-Click-Using-Bootstrap