Jcrop 在模态窗口上无法正常工作

Posted 2023-02-25

【中文标题】Jcrop 在模态窗口上无法正常工作

【英文标题】：Jcrop not working properly on modal window

【发布时间】：2015-12-28 22:16:47

【问题描述】：

我有一个包装器 div box，它是模态窗口。模态窗口内有一个图像。将 Jcrop() 添加到此图像时，我得到了意想不到的结果。如下图：

请注意，图像出现在模态窗口的内部和外部。这是使用的 jQuery 代码：

$("#previewSub").Jcrop();  //previewSub is the smaller preview

我该如何解决这个问题？当模态框关闭时，我尝试从图片中删除 Jcrop，但我仍然得到相同的结果。

这是一个演示我的问题的小提琴：

https://jsfiddle.net/d562yrsp/1/

【问题讨论】：

能不能做个jsfiddle或者sn-p，没有例子好难帮忙

@DelightedD0D 当然，但我不知道如何在小提琴中包含插件

您可以在线找到所需文件的 CDN 版本 like here 然后使用“外部资源”选项卡将它们添加到小提琴中，如 this image 所示但是，Here is a fiddle with the files added，只需添加您的代码

@DelightedD0D 所以这是一个演示我的问题的小提琴jsfiddle.net/d562yrsp/1

【参考方案1】：

要获得您想要的效果，请将您的 html 更改为：

<div id="modal">
  <div class="preview-container">
    <img id="previewSub" src="http://www.cuteadorable.com/wp-content/uploads/2015/05/cuteadorable-kitty.jpg" />
  </div>
</div>
<button id="abutton">
  show modal
</button>

把你的 CSS 改成这样：

#modal 
  position: absolute;
  background: black;
  width: 300px;
  height: 300px;
  display: none;

.preview-container 
  top: 100px;
  left: 80px;
  width: 150px;
  height: auto;
  background-color: #2185C5;
  position: relative;

#previewSub 
  width: 150px;
  height: auto;/* use auto here so it doesnt distort the aspect ratio of the image */

#abutton 
  position: absolute;
  background: red;
  top: 350px;

把你的 jQuery 改成这样：

$('#abutton').on("click", function() 
  $("#modal").show();
  $('#previewSub').Jcrop();
);

Here is an updated jsFiddle

请注意，Jcrop 在目标图像中设置以下样式：

style="display: block; visibility: visible; width: 150px; height: 84px; border: none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; opacity: 1;"

这会覆盖您在#previewSub 的规则中添加的position、top 和left 设置。为避免这种情况，我将图像放置在具有 preview-container 类的容器 div 中，并将定位应用到该容器。

CSS 可能需要根据您的需要进行一些调整，但这应该可以让您排序。