Question

我遇到了一个关于wordpress网站和以下代码的真正问题。它的工作原理除了我似乎无法更新Z-index。我试过为ui-front和几乎所有其他标签添加和编辑CSS。如果我在Chrome中打开检查器，我会看到它仍然是自动为叠加设置Z-Index为100，为模态设置为101。如果我在Inspector中手动将其调整为5k，则模态会在所有内容的正前方弹出。我似乎无法弄清楚如何强制z-index达到我想要的[和我的Wordpress主题以及我已经搜索过的所有css并且没有看到任何其他z-index声明所以不知道为什么自动分配的值不起作用。请帮助。

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 
}

参考文献：

[涉及的网站（请参阅左侧导航菜单中的测试链接，以获取当前状态的演示）] [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))

Answer 1

好的，我回答了自己的问题。 LoL，而不是留下CSS Jquery声明，我将它们移出并将其粘贴在我的样式表CSS的尾部，用于我的wordpress主题[stylesheet.css默认]。现在z-index设置得很好。

Wordpress莫代尔隐藏

1 个答案: