jQuery 如何在图片的右上角显示删除按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15272191/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to show delete button in top right corner of Image?
提问by Nestor C
i would like to show delete button at top right corner to image? how could i achieve this?
我想在右上角显示删除按钮以显示图像？我怎么能做到这一点？
my html is like this :-
我的 html 是这样的：-
main image :
主图：
<img id="' + id + '" src="../Images/DefaultPhotoMale.png" class="' + item + '" width="40" height="40" alt="image" title="' + projectTitle + '" style="cursor:pointer" />
x button image to display in top-right of above image
x 按钮图像显示在上图的右上角
'<img id="' + item.Soid + '" src="../Images/RemoveButton.ico" style="display:none" title="Remove Specialization" />
'<img id="' + item.Soid + '" src="../Images/RemoveButton.ico" style="display:none" title="Remove Specialization" />
No background image set please, i need click event for that delete button something like this :
请不要设置背景图像，我需要该删除按钮的单击事件，如下所示：
回答by dfsq
Usual approach with position: relativeand position: absolute.
使用position: relative和 的常用方法position: absolute。
HTML:
HTML：
<div class="img-wrap">
<span class="close">×</span>
<img src="http://lorempixel.com/100/80">
</div>
CSS:
CSS：
.img-wrap {
position: relative;
...
}
.img-wrap .close {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
...
}
Extended demo (+ JS interaction) http://jsfiddle.net/yHNEv/
扩展演示（+ JS 交互）http://jsfiddle.net/yHNEv/
回答by James King
I have coded one up for you http://jsfiddle.net/PPN7Q/
我已经为你编写了一个http://jsfiddle.net/PPN7Q/
You need to wrap the image in a DIV
您需要将图像包装在 DIV 中
<div class="thumbnail">
<img src="http://96pix.com/images/renee-v.jpg" />
<a href="">Delete</a>
</div>
and apply the following CSS rules
并应用以下 CSS 规则
.thumbnail {
width:50px;
height:50px;
position:relative;
}
.thumbnail img {
max-width:100%;
max-height:100%;
}
.thumbnail a {
display:block;
width:10px;
height:10px;
position:absolute;
top:3px;
right:3px;
background:#c00;
overflow:hidden;
text-indent:-9999px;
}
回答by Arun P Johny
回答by Ben Mueller
You should write a plugin for this
你应该为此编写一个插件
(function ($, window, document, undefined) {
'use strict';
var defaults = {};
var Delete = function (element) {
// You can access all lightgallery variables and functions like this.
this.core = $(element).data('lightGallery');
this.$el = $(element);
this.core.s = $.extend({}, defaults, this.core.s)
this.init();
return this;
}
Delete.prototype.init = function () {
var deleteIcon = '<span id="lg-clear" class="lg-icon deletePicture"><span class="glyphicon glyphicon-trash"></span></span>';
this.core.$outer.find('.lg-toolbar').append(deleteIcon);
this.delete();
};
Delete.prototype.delete = function () {
var that = this;
var image_id = '';
this.core.$outer.find('.deletePicture').on('click', function () {
// get vars from data-* attribute
image_id = that.core.$items.eq(that.core.index).data('id');
table_name = that.core.$items.eq(that.core.index).data('table-name');
/**
* Remove Touchpoint Retailer Image
*/
var formData = new FormData();
formData.append('image_id', image_id);
$.ajax(......).success(function()
{
var thumbcount = that.core.$outer.find('.lg-thumb-item').length;
if(thumbcount >= 1) {
// remove slides
}
else {
that.core.destroy();
}
});
});
}
/**
* Destroy function must be defined.
* lightgallery will automatically call your module destroy function
* before destroying the gallery
*/
Delete.prototype.destroy = function () {
}
// Attach your module with lightgallery
$.fn.lightGallery.modules.delete = Delete;
})(jQuery, window, document);
回答by fahad.kazi
You might try this:
你可以试试这个：
<div style="position:relative; width:'mainimagewidth'">
main image<img src="" />
<span style="position:absolute; top:0; right:0;">ximage<img src="" /></span>
</div>
回答by XiM
In my opinion you can just set style="position:absolute;top:0px;right:0px;"for RemoveButton.icoand style="position:relative;"for divwith img
在我看来，你可以只设置style="position:absolute;top:0px;right:0px;"forRemoveButton.ico和style="position:relative;"for divwithimg
回答by Sarang
<div style=" float: right;margin-left: 289px;position: absolute;">*</div>
<img src="score.png" width="300" height="300" />
Please try this. It might help.
请试试这个。它可能会有所帮助。
