Question

我的图像以模态显示。

    <div class="col-md-3 img-box">
    <input type="checkbox" id="image_23" name="pics[]" value="wave-2211925_640.jpg" data-id="image_23">
    <label for="image_23" style="background-image: url(uploads/wave-2211925_640.jpg)">
        <i class="glyphicon glyphicon-ok"></i>
     </label>
    </div>

我希望能够为点击的图像调出菜单。我需要获取图像的ID，因为应该删除右键单击选项，为了删除正确的图像，我需要id。

我试过这个，但它不起作用。如果我将其更改为按钮类，那么它可以工作，但是当我右键单击图像时，我似乎无法使其工作。

HTML：

<ul class="dropdown-menu context-menu">
  <li><a href="#">RELOAD</a></li>
  <li><a href="#">SETTINGS</a></li>
  <li><a href="#">LOGOUT</a></li>
</ul>

$(function() {

  $(".img-box").contextmenu(function(e) {
    $('.context-menu').css({
      left: e.pageX,
      top: e.pageY
    });

    $('.context-menu').hide();

    $('.context-menu').slideDown(300);

    return false;
  });

  $( ".img-box" ).click(function(e) {
    $('.context-menu').slideUp(300);
  }); 
});

如果您右键单击正文中的任何位置，以下是原始代码。

$(function() {


  $("html, body").contextmenu(function(e) {
    $('.context-menu').css({
      left: e.pageX,
      top: e.pageY
    });

    $('.context-menu').hide();


    $('.context-menu').slideDown(300);

  
    return false;
  });

  $( "html, body" ).click(function(e) {
    $('.context-menu').slideUp(300);
  });
});

body {
  height: 100vh; 
  width: 100%; 
  
  display: flex; 
  justify-content: center; 
  align-items: center;
  
  user-select: none; 
  background-color: #2196F3; 
  color: #0D47A1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h1> TRY RIGHT CLICKING </h1>

<ul class="dropdown-menu context-menu">
  <li><a href="#">RELOAD</a></li>
  <li><a href="#">SETTINGS</a></li>
  <li><a href="#">LOGOUT</a></li>
</ul>

img-box style：

#gallery .img-box {
  text-align: center;
  position: relative
}
#gallery .img-box label i {
  position: absolute;
  display: none;
  color: green;
  top: 5px;
  right: 5px;
  font-size: 1em;
  border-radius: 50%;
  border: 2px solid green;
  padding: 2px;
}
#gallery .img-box label {
background: black;
  display: block;
  padding-bottom: 100%;
  min-height: 150px!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid gray;
  border-radius: 4px;
  margin: 15px;
}
#gallery .img-box input {
  display: none;
}

Answer 1

所以，根据评论和我想出的，你需要这样的东西，对吗？如果没有在评论中告诉我继续谈话。

applicationWillResignActive(_ application: UIApplication)

$(function() {


  $(".img-box").contextmenu(function(e) {
    $('.context-menu').css({
      left: e.pageX,
      top: e.pageY
    });

    $('.context-menu').hide();


    $('.context-menu').slideDown(300);

  
    return false;
  });

  $( "html, body" ).click(function(e) {
    $('.context-menu').slideUp(300);
  });
});

body {
  height: 100vh; 
  width: 100%; 
  
  display: flex; 
  justify-content: center; 
  align-items: center;
  
  user-select: none; 
  background-color: #2196F3; 
  color: #0D47A1;
}

#gallery .img-box {
  text-align: center;
  position: relative
}
#gallery .img-box label i {
  position: absolute;
  display: none;
  color: green;
  top: 5px;
  right: 5px;
  font-size: 1em;
  border-radius: 50%;
  border: 2px solid green;
  padding: 2px;
}
#gallery .img-box label {
background: black;
  display: block;
  padding-bottom: 100%;
  min-height: 150px!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid gray;
  border-radius: 4px;
  margin: 15px;
}
#gallery .img-box input {
  display: none;
}

启用右键单击自定义菜单的图像

1 个答案: