imgAreaSelect不隐藏在模态关闭或滚动页面

Question

I'm using imgAreaSelect for an array of images, which users can toggle through by clicking < and > arrows. I was able to get the plugin working perfectly in my modal window when it was just one image, but somehow when dealing with dynamically setting the <img id="image"> attribute, it does not like my css anymore.

Here's a jsfiddle of how the plugin should work, but with only one image: http://jsfiddle.net/B83Ck/ The imgAreaSelect plugin is applied directly to the image, no problems.

Unfortunately, this did not work with the JS I was using to toggle between images, as seen in the next jsfiddle. Instead, I figured I would try to apply the imgAreaSelect to the block element the image resides in: http://jsfiddle.net/8yz4t/ It looks great on select, but if you scroll up and down, you'll notice the select area stays fixed while the modal moves. Also, when you close the modal the selection remains visible.

So here I am now. I read a few things about adding parent: '#parentblock' to my imgAreaSelect instance, which you can see in this jsfiddle: http://jsfiddle.net/H4hEx/ This has the scrolling and close functionality I need, but it doesn't display on the image itself. It's kinda off to the side. Any suggestions?

Answer 1

I finally managed to get this worked out, and most of it was publicly available knowledge, so I guess I failed.

I found this fix: Wrong positioning in Bootstrap modal window #39

Along with making the parent: #parent div style="position:relative;"

Working jsfiddle here: http://jsfiddle.net/H4hEx/3/

Those who happen upon this thread in the future, don't be alarmed if the jsfiddle doesn't work, the link to the external resource for imgAreaSelect may have moved. Just replace it with your own. (I think that's how it works?)

Cheers