0

I am having a real issue with a wordpress site and the following code. It works EXCEPT I CAN NOT seem to get the Z-index to update. I have tried adding and editing CSS for ui-front, and almost every other tag. If I open inspector in Chrome I see it is STILL auto assigning Z-Index of 100 for overlay and 101 for the modal. If I manually adjust it in Inspector to 5k the modal pops right in front of everything as it should. I just can't seem to get it figured out how to force the z-index to what I want [and my Wordpress theme and all I have scoured the css for and do not see any other z-index declarations so dunno why the auto assigned value isn't working. PLEASE help.

add_action( 'wp_enqueue_scripts', 'enqueue_scripts_so_22382151' );
add_action( 'wp_header', 'print_header_so_22382151' );
add_action( 'wp_footer', 'print_footer_so_22382151' );

/**
 * Enqueue jQuery Dialog and its dependencies
 * Enqueue jQuery UI theme from Google CDN
 */
function enqueue_scripts_so_22382151() {
    wp_enqueue_script( 'jquery-ui-dialog', false, array('jquery-ui','jquery') );
    wp_enqueue_style( 'jquery-ui-cdn', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dot-luv/jquery-ui.min.css' );
}    


/**
 * Print Dialog custom style
 */
function print_header_so_22382151() { 
    ?>
    <style>
        /* A class used by the jQuery UI CSS framework for their dialogs. */
        .ui-front {
            z-index:1000000 !important; /* The default is 100. !important overrides the default. */
        }
        .ui-widget-overlay {
            opacity: .8;
        }
    </style>
    <?php
}

/**
 * Print Dialog script
 */
function print_footer_so_22382151() { 
    $current_domain = $_SERVER['SERVER_NAME'];
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
          $('a[href^="http://"],a[href^="https://"]')
            .not('[href*="<?php echo $current_domain; ?>"]')
            .click(function(e) {
                e.preventDefault();
                var url = this.href;
                $('<div></div>').appendTo('body')
                    .html('<div><h6>Link Disclaimer:  [...].</h6></div>')
                    .dialog({
                        modal: true, title: 'message', zIndex: 10000, autoOpen: true, width: 'auto', resizable: false,
                        buttons: {
                            Yes: function () {
                                window.open(url);
                                $(this).dialog("close");
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        close: function (event, ui) {
                            $(this).remove();
                        }
                    });
              })
        });
    </script>
    <?php 
}

References:

[Site involved (see testing link on left hand nav menu toward bottom for demo of current status)][1]

Why jQuery UI 1.10 remove jquery dialog zIndex option?

WordPress, jQuery UI CSS Files?

Code Originally Found in Stack Overflow Question (see last answer (should be loaded for you))

Community
  • 1
  • 1
Mike Miller
  • 1
  • 1

1 Answers1

0

Ok, I answered my own question. LoL, instead of leaving the CSS Jquery declarations I moved those out and stuck those on the tail of my Stylesheet CSS for my wordpress theme [stylesheet.css by default]. Now the z-index is being set just fine.

Mike Miller
  • 1
  • 1