modal window displaying on bottom and not on top

Posted on 2011-03-08
Last Modified: 2012-05-11
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>
Question by:melvint91
  • 4
  • 2

Expert Comment

ID: 35079798
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.

Expert Comment

ID: 35079812
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?

Author Comment

ID: 35149155
I decided to go with something else...modal window using Coldfusion.
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.


Accepted Solution

Gewgala earned 500 total points
ID: 35345783
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.

Expert Comment

ID: 35360080
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.

Author Closing Comment

ID: 35366984
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.

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
html input 8 43
forgetful about js objects 8 47
JS Event Does not Trigger From File 2 28
html / css issue / div issue. stuck, help needed 2 16
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question