Popup using shadowbox-js going behind slider and menu

HTML & CSS
1

Hi,

I am showing popup on website. The issue is popup going behind slider and menu.

URL to check the issue => https://www.hrms-systems.com/ps6_test/en/

Screen shot URL => https://prnt.sc/mpt84u

Any idea how to fix the issue?

Best Regards,
Zohaib

2

I see 2 popups but neither is behind either the slider or the menu…

<offtopic>
I find one popup irritating enough on a website, without being presented with two.
<offtopic>

3

Hi,
If you scroll the page using mouse up side then popup going inside menu
Please check the screen shot URL. This is test instance of the website

4

Is s likely to be PHP related? Surely more CSS or JS?

5

It is related to shadowbox.js, jquery and css .

6

Raise the z-index some more as you have something higher.

This will do the trick.

#sb-container{z-index:9999}

2 Likes
7

Thanks. The problem is solved. but it is affecting other slider and home page images

I tried this solution in past but cache was not showing updated css file.

Now below code in css file works but affecting other images on home page.

Please check URL for the issue from above post.

#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:9999;text-align:left;visibility:hidden;display:none;}

8

Can you clarify what elements you are talking about as I see no other overlaps. A screenshot would help.

Your site hasn’t updated yet so i can’t tell if you have added something incorrectly.

I do notice that the images inside #htmlcontent_top are dropped down below the main left image. This is because you have made the element 33% wide but there is not 33% of space available. Why did you not use the bootstrap columns as you were supposed to when using boostrap? You could fix the drop by reducing the width to say 31% but the correct answer would be to place each content in a proper bootstrap column because that’s why you are using bootstrap :slight_smile:

2 Likes
9

I am facing some issues related javascript errors therefore on demo instance popup not showing.

When I am doing z-index change,it was affecting other images on homepage therefore I try to change name of the tag #sb-container in shadowbox.js file

The bootstrap structure in default by prestashop open source e-commerce web application.
Below is the screen shot url.

I am not facing this type of issue on version 1.5 and 1.7. below are the working URLs

https://www.hrms-systems.com/presta-addons/gb/

10

I’m having a hard time understanding what you want :slight_smile:

It would have no effect on anything else on that page as the code you adjusted was on the id of #sb-container of which there can only be one. It will not affect anything else except #sb-container and will raise its z-index above everything else (assuming you don’t trump it somewhere else).

I think we must be talking at cross purposes. :slight_smile:

As an aside you could have reduced the z-index on your header instead and as long as you made it below 999 then the popup would show. At the moment your header in global.css has a z-index of 5003:

#header{z-index:5003;}

You could just reduce that below the original z-index of the popup which was 999.

I don’t see any popups in that screenshot but I do see the right column images dropping below the left column images as I already explained and detailed.

These are working urls for what?

They don’t show the images from your screenshot so we can’t compare the dropped images if that was what they were meant to show. Also in those urls the popups are working because you have not given the header a higher z-index as in your initial example.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.