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.
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.


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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML5 frame 5 26
Place text over image using CSS 6 44
If condition on Html with Asp 11 18
styling bootstrap grid system with CSS 2 8
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

832 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