I am using K2 on Joomlashack's Impacto template w/ Joomla 2.5. When I view an item, the items image comes up overlaying the center of the page sort of as a modal window covering the content on the page. There is no X to close it and I can't seem to find any setting that controls this. I've used K2 before and never seen this issue.

Anyone ever seen this? Know what is going on?

Hi. Probably your template makes use of a modal other than the Joomla! default. K2 uses the default Joomla! modal so all buttons are there... If your template uses a different kind of modal then the issue is in your template not K2.

But what is happening is that as soon as I click to open the item, the image is automatically opening in the modal window overlaying the page. I am not clicking on the image to make it larger in the item.

If I click on the overlayed image, it then opens in a modal window on top of that one with the close button available. If I close that modal windows, the image overlaying the page is still there.

Also, when the item opens with the image overlaying, the background is not greyed out as it does when the modal image with the close button opens.

I will try to post a screenshot if you think it would help. Unfortunately this is not a public site, it is on an internal network so I can't even get anyone access.

Added info: If I "Hide" the image in item view in the settings, this does not occur.

Probably your template or some other extension is adding javascript code to your page causing this. Try to disable some extensions and see if issue remains.

Is it a modal window or just a very large image? What is your image's real dimensions? Maybe make a smaller version of your image?

It wasn't just the size of the image. I switched templates and the issue went away with the new template. The template was one of those new ones with responsive layout and I'm wondering if something in the template didn't play well with K2....

Hello! It´s because of a conflict with twitter bootstrap theme. It uses also the .modal class. For solution you can edit the bootstrap stylesheet changing .modal to div.modal. Works perfect for me.

Cheers

Elisa B)

i'm using bootstrap and i test your solution elisa but not work really well... when i click the image show the modal but the page lose your content and modal doesn't have close icon..how can i fix this ? thanks for help

Thank you, Elisa,

that did the trick for us - for now.... we simply added .div before each ".modal" in the CSS file - and now it seems to work.

I am concerned that some other issues might come up now.... We'll see.... B)

And with the next update of the template I might have to do it again. Thus I am hoping for a better solution still. So far so good, however. :)

Hi there,

To avoid any problems with future updates, i included a code in my custom.css



.modal {

position: inherit;
}



And that did the trick for me. and even if i will update my bootstrap files, i can use my override. I think its always a good habit to use overrides instead of modifying the core files.
I hope this help.