Search code examples
jquerycssmodal-dialogsimplemodal

Slideshow image shows up in front of Modal window - updated with jsfiddle

Kind of stuck here.

Based on Hanish feedback - I have created a Jsfiddle to replicate the issue I'm facing

http://jsfiddle.net/BY4fu/10/

Will appreciate if anyone can help me debug

I am using the following plugin for the slideshow

http://jquery.malsup.com/cycle/basic.html

Now on the same page I am displaying text in a modal window - when a user clicks on certain links. This is the plugin I'm using for the modal window

http://rmcreative.ru/playground/modals_plugin/demo.html

Now the issue is - when the modal window opens up - the images from the slideshow are on top of the modal window and not behind

Based on dalefrench feedback I tried using z-index - but no luck

.modal {

z-index:1000;
background: #fff;
width: 600px;
margin: 20px auto;
border-radius: 30px;
border: 6px solid #000;
padding: 20px;  
text-align:justify;

}

.slideshow img { padding:5px; background-color:#000; z-index:10; }

Thanks for your time - appreciate it

Solution

  • Try giving your .slideshow element a position value of position:relative and the same for .modal. Then give the .slideshow element a z-index: -1 value.

    Updated the fiddle: http://jsfiddle.net/BY4fu/6/

    .slideshow {
    height: 125px;
    width: 232px;
    margin-left:20px;
    position: relative;
    z-index: -1;
}

 .modal {
    z-index:1000;
    background: #fff;
    width: 300px;
    margin: 20px auto;
    border-radius: 30px;
    border: 6px solid #000;
    padding: 20px;
    text-align:justify;

}