Jcrop 在模态 window 上无法正常工作
Jcrop not working properly on modal window
我有一个包装器 div box
,它是模态 window。模态 window 里面有一张图片。将 Jcrop() 添加到此图像时,我得到了意想不到的结果。如下图:
请注意,图像出现在模态 window 内部和外部。这是使用的 jQuery 代码:
$("#previewSub").Jcrop(); //previewSub is the smaller preview
我该如何解决这个问题?当模式关闭时,我尝试从图片中删除 Jcrop,但我仍然得到相同的结果。
这里有一个 fiddle 可以证明我的问题:
要获得您想要的效果,请将您的 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
设置。为避免这种情况,我将图像放在 div 和 class preview-container
的容器中,并将定位应用于该容器。
CSS 可能需要根据您的需要进行一些调整,但这应该可以解决问题。
我有一个包装器 div box
,它是模态 window。模态 window 里面有一张图片。将 Jcrop() 添加到此图像时,我得到了意想不到的结果。如下图:
请注意,图像出现在模态 window 内部和外部。这是使用的 jQuery 代码:
$("#previewSub").Jcrop(); //previewSub is the smaller preview
我该如何解决这个问题?当模式关闭时,我尝试从图片中删除 Jcrop,但我仍然得到相同的结果。
这里有一个 fiddle 可以证明我的问题:
要获得您想要的效果,请将您的 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
设置。为避免这种情况,我将图像放在 div 和 class preview-container
的容器中,并将定位应用于该容器。
CSS 可能需要根据您的需要进行一些调整,但这应该可以解决问题。