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

Question

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

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

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

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

这是一个演示我的问题的 fiddle :

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

Answer 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="显示: block ；可见性:可见；宽度:150px；高度:84px；边框:无；边距:0px；填充:0px；position:absolute；顶部:0px；左侧:0px；不透明度: 1;"

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

CSS 可能需要根据您的需求进行一些调整，但这应该可以帮助您解决问题。