Question

Trying to create multiple overlays using Simple Modal. Looked through the doc’s as well as several other post on Stack and been unsuccessful in doing so. Hopefully more experience jQuery developers can chime in and help.

HTML:

<div class="basic-modal work-thumb">
    <a class="basic" href="#">
        <img src="thumbnail.png" />
    </a>
    <a class="basic" href="#">
        <img src="thumbnail.png" />
    </a>
</div>

<div id="modal-help">
    Modal Content here...
</div>
<div id="modal-faq">
    Modal Content here...
</div>

JS:

$('.basic-modal .basic').click(function (e) {
    e.preventDefault();
    $('#modal-' + this.id).modal({
        position:[232,218],
        escClose:true,
        overlayClose:true
    });
        return false;
});//end simple modal

The overlay works but the content within the #modal-help does not show. Any help/suggestions would be awesome. Thank you!

Answer 1

Set the div that was clicked last to a lower zvalue than the div that was just clicked. This will cause the newly clicked div to be first to show in the layers.