modal window displaying on bottom and not on top

My modal window is displaying on bottom of current modal window.  How do I get it to display on top.  Url: - then Under "Business Skills" select "customer service" - then select "customer service representative" course.  You will see the modal window displaying underneath current modal window.

See code below for modal window displaying to bottom, which I used Jquery for the modal window displaying to bottom.  The modal window displaying to top, I used coldfusion...

Code Below:

<script src="js/jquery.js" type="text/javascript" language="javascript"></script>
    (function ($) {

      * Ex:
      * var _settings = {
      *       id: 'modal',
      *       src: function(sender){
      *            return jQuery(sender).attr('href');
      *      },
      *       width: 800,
      *       height: 600
      * }
      var _settings = {
            width: 800, // Use this value if not set in CSS or HTML
            height: 600, // Use this value if not set in CSS or HTML
            overlayOpacity: .85, // Use this value if not set in CSS or HTML
            id: 'modal',
            src: function (sender) {
                  return jQuery(sender).attr('href');
            fadeInSpeed: 0,
            fadeOutSpeed: 0

      $.modal = function (options) {
            return _modal(this, options);
      $ = function () {
      $.modal.close = function () {
      $.fn.modal = function (options) {
            return _modal(this, options);
      _modal = function (sender, params) {
            this.options = {
                  parent: null,
                  overlayOpacity: null,
                  id: null,
                  content: null,
                  width: null,
                  height: null,
                  modalClassName: null,
                  imageClassName: null,
                  closeClassName: null,
                  overlayClassName: null,
                  src: null
            this.options = $.extend({}, options, _defaults);
            this.options = $.extend({}, options, _settings);
            this.options = $.extend({}, options, params);
            this.close = function () {
                  jQuery('.' + options.modalClassName + ', .' + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).unbind().remove(); });
   = function () {
                  if (typeof options.src == 'function') {
                        options.src = options.src(sender)
                  } else {
                        options.src = options.src || _defaults.src(sender);

                  var fileExt = /^.+\.((jpg)|(gif)|(jpeg)|(png)|(jpg))$/i;
                  var contentHTML = '';
                  if (fileExt.test(options.src)) {
                        contentHTML = '<div class="' + options.imageClassName + '"><img src="' + options.src + '"/></div>';

                  } else {
                        contentHTML = '<iframe width="' + options.width + '" height="' + options.height + '" frameborder="0" scrolling="no" allowtransparency="true" src="' + options.src + '"></iframe>';
                  options.content = options.content || contentHTML;

                  if (jQuery('.' + options.modalClassName).length && jQuery('.' + options.overlayClassName).length) {
                        jQuery('.' + options.modalClassName).html(options.content);
                  } else {
                        $overlay = jQuery((_isIE6()) ? '<iframe src="BLOCKED SCRIPT\'<html></html>\';" scrolling="no" frameborder="0" class="' + options.overlayClassName + '"></iframe><div class="' + options.overlayClassName + '"></div>' : '<div class="' + options.overlayClassName + '"></div>');

                        $modal = jQuery('<div id="' + + '" class="' + options.modalClassName + '" style="width:' + options.width + 'px; height:' + options.height + 'px; margin-top:-' + (options.height / 2) + 'px; margin-left:-' + (options.width / 2) + 'px;">' + options.content + '</div>');

                        $close = jQuery('<a class="' + options.closeClassName + '"></a>');

                        var overlayOpacity = _getOpacity($overlay.not('iframe')) || options.overlayOpacity;
                        $overlay.fadeTo(0, 0).show().not('iframe').fadeTo(_settings.fadeInSpeed, overlayOpacity);

                        $ () { jQuery.modal().close(); });
                        $ () { jQuery.modal().close(); });
            return this;
      _isIE6 = function () {
            if (document.all && document.getElementById) {
                  if (document.compatMode && !window.XMLHttpRequest) {
                        return true;
            return false;
      _getOpacity = function (sender) {
            $sender = jQuery(sender);
            opacity = $sender.css('opacity');
            filter = $sender.css('filter');

            if (filter.indexOf("opacity=") >= 0) {
                  return parseFloat(filter.match(/opacity=([^)]*)/)[1]) / 100;
            else if (opacity != '') {
                  return opacity;
            return '';
      _defaults = {
            parent: 'body',
            overlayOpacity: 85,
            id: 'modal',
            content: null,
            width: 800,
            height: 600,
            modalClassName: 'modal-window',
            imageClassName: 'modal-image',
            closeClassName: 'close-window',
            overlayClassName: 'modal-overlay',
            src: function (sender) {
                  return jQuery(sender).attr('href');
 .modal-overlay {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      background: #131313;
      opacity: .85;
      filter: alpha(opacity=85);
      z-index: 101;
.modal-window {
      position: fixed;
      top: 50%;
      left: 50%;
      margin: 0;
      padding: 0;
      z-index: 102;
      background: #fff;
      border: solid 8px #000;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
.close-window {
      position: absolute;
      width: 47px;
      height: 47px;
      right: -23px;
      top: -23px;
      background: transparent url(../images/close-button.png) no-repeat scroll right top;
      text-indent: -99999px;
      overflow: hidden;
      cursor: pointer;
 <style type="text/css">
A:link {text-decoration: underline}
A:visited {text-decoration: underline}
A:active {text-decoration: underline}
A:hover {text-decoration: color: red;}

<!--- New Features I --->

<table class="contacts" cellspacing="0" summary="Contacts template">
<td class="contactDept" colspan="3">Customer Service Representative (CSR) - Professionalism &nbsp;&nbsp; <img src="images/registerToday_gif.gif" alt="coming soon" /></td>
<td class="contact" width="65%"><strong>Course Name</strong></td>
<td class="contact" width="20%"><strong>Course ID</strong></td>
<td class="contact" width="15%"><strong>Length</strong></td>
<td class="contact"><!---<a href="#" onclick="oracle2100();">New Installation and Configuration Features</a>--->
<!---<a href="csr_2100.cfm" target="_blank">The Customer Service Representative</a>--->
<a href="test2.cfm" onclick="$(this).modal({width:833, height:453}).open(); return false;">Customer Service Representative</a>
<td class="contact">CSR-2100</td>
<td class="contact">3.5 hours</td>
Who is Participating?
GewgalaConnect With a Mentor Commented:
The original problem stated that there were 2 different modal windows in use (one Coldfusion and one JQuery), and that they were for some reason not behaving correctly when used together.  In my post of #35079812 I stated the following:  "...Another option is perhaps instead of using 2 different kinds of modals, you could use 2 of the same one?..."

Going off of what melvint91 stated in post #35149155, the solution was to go with a modal window using Coldfusion.  If this solution was reached because of dropping the jQuery window and instead using two Coldfusion windows, then I will have to object because that is what I advised to do in #35079812 (for clarification, my continued phrase of "Make them both JQuery modals?" was just a follow-up idea, but preceeding that I did state that perhaps one author of modal windows should be adopted instead of the simultaneous use of two).

If the solution was reached by some other means entirely, then I'm ok with closing this question without being awarded points.
Well, if you are having problems with something appearing behind another object and they are absolutely positioned like a modal, then the object behind the one in the foreground has a lower z-index CSS value then the one in front.  z-index is a CSS property that holds a number value.  The higher the number the more it will appear in the foreground of other objects.  If you have 2 objects and one has a z-index of 4 and the other has a z-index of 5, the one with the value of 5 will appear in front.  Perhaps try setting the one in the background to have a z-index of 999999 and see if that does the trick?

here is a link explaining the z-index property:

From your code though, one of your modal objects has a variable name of _modal, so you should be able to modify the z-index of that one to figure out which one of the two that is.  If it's the one in the foreground, you could give it a lower z-index until it actually appears behind, or if it's the one in the background, give it a higher z-index until it appears in front.  Something like this: = 9999999;

or = -1;

or = -9999999;

If you needed it to be a function that you could call, you could do:

function configureModalZIndex(amount)
{ = amount;

and then you would just call the function like:  


to give the modal a z-index value of 999.
Actually though, seeing as that's JQuery, the _modal variable isn't the actual DOM element that represents the modal.  You'd have to play with the settings of the CSS if that can be customized.  I personally have not used JQuery extensively so I wouldn't be able to give you any advice on how to do that.  The z-index property though is what you want to investigate though.  

Another option is perhaps instead of using 2 different kinds of modals, you could use 2 of the same one?  Make them both JQuery modals?
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to and use offer code ‘EXPERTS’ to get 10% off your first purchase.

melvint91Author Commented:
I decided to go with something else...modal window using Coldfusion.
If the solution was in fact to ditch two different kinds of modals used and to go with only one, then I recommend http:#35079812 as the answer and should be awarded full points.  It sounds like this was indeed the solution based on what melvint91 posted in http:#35149155.
melvint91Author Commented:
Even though Gewgala suggested using Coldfusion only for the popup, That's what I originally had, using Coldfusion for all my popups, but using Coldfusion only is very limited when it comes to changing the design, I wanted to incorporate Jquery but I couldn't get it to work, therefore I consulted with experts-exchange.  Integrating Jquery wasn't really resolved therefore I retrieved my old code with using only Coldfusion as my popup methods.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.