Solved

modal window displaying on bottom and not on top

Posted on 2011-03-08
7
609 Views
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:  www.mobileitt.com - 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:

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

      /**********************************
      * CUSTOMIZE THE DEFAULT SETTINGS
      * 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
      }

      /**********************************
      * DO NOT CUSTOMIZE BELOW THIS LINE
      **********************************/
      $.modal = function (options) {
            return _modal(this, options);
      }
      $.modal.open = function () {
            _modal.open();
      }
      $.modal.close = function () {
            _modal.close();
      }
      $.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(); });
            }
            this.open = 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>');
                        $overlay.hide().appendTo(options.parent);

                        $modal = jQuery('<div id="' + options.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>');
                        $modal.hide().appendTo(options.parent);

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

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

                        $close.click(function () { jQuery.modal().close(); });
                        $overlay.click(function () { 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');
            }
      }
})(jQuery);
 </script>
 <style>
 .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>
 <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;}
</style>
</head>

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

<table class="contacts" cellspacing="0" summary="Contacts template">
<tr>
<td class="contactDept" colspan="3">Customer Service Representative (CSR) - Professionalism &nbsp;&nbsp; <img src="images/registerToday_gif.gif" alt="coming soon" /></td>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
<td class="contact">CSR-2100</td>
<td class="contact">3.5 hours</td>
</tr>
</table>
</body>
</html>
0
Comment
Question by:melvint91
  • 4
  • 2
7 Comments
 
LVL 7

Expert Comment

by:Gewgala
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:

http://www.w3schools.com/Css/pr_pos_z-index.asp

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:

_modal.style.zIndex = 9999999;

or

_modal.style.zIndex = -1;

or

_modal.style.zIndex = -9999999;

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

function configureModalZIndex(amount)
{
     _modal.style.zIndex = amount;
}

and then you would just call the function like:  

configureModalZIndex(999);

to give the modal a z-index value of 999.
0
 
LVL 7

Expert Comment

by:Gewgala
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?
0
 

Author Comment

by:melvint91
ID: 35149155
I decided to go with something else...modal window using Coldfusion.
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 7

Accepted Solution

by:
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.
0
 
LVL 7

Expert Comment

by:Gewgala
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.
0
 

Author Closing Comment

by:melvint91
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.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now