Preview modal is not working fine if multiple widgets are there in different tabs

[msinghai]

Hello Kartik,

I have been using this plugin and its really great work. I am facing one issue. I am putting the steps to reproduce it.

• In a form have two tabs( I have used bootstrap tabs)
• In each tab have an input widget field.
• In the first tab, if you select an image and zoom it it works perfect
• Now select an image for the second tab input widget and click on zoom. It would show just overlay.
• The image is there but in the first tab thus using firebug, if i adjust the css and go to first tab, i would be able to see the image in the modal window.

Could you please tell me how this could be resolved?

Regards,
Mayank

[kartik-v]

This is more to do with BS Modal behavior and styling... that you need to handle it in your code. You can try $('.modal').appendTo('body'); after you click each tab.

[Kiblyn11]

Got the same issue and I found out what happens.
The plugin create one modal next to the first plugin field in DOM.
But when displaying other tab and trying to display, this modal is hidden under the other tab, which is display:none.

I suggest to append the modal to the body instead of the parent, what do you think ? I get it working that way :

in _initZoom

$dialog = $(document.createElement('div')).html(modalMain).appendTo('body');

instead of

$dialog = $(document.createElement('div')).html(modalMain).insertAfter(self.$container);

[kartik-v]

The problem with above approach is body tag is optional and may not exist in all layouts.