在 WordPress 页面上加载 jqueryUI dialog() 函数

Question

我正在尝试为 WordPress 网站制作弹出窗口 window JavaScript。我正在使用 jQueryUI 的 dialog() 函数。我的预期行为是页面加载时会出现一个弹出窗口，但这并没有发生。我正在使用 http://jqueryui.com/dialog/#default

中的基本示例

我做了一个测试 html 页面，其中 div jQuery 可以抓取：

<div id="dialog" title="Basic dialog"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div>

我的jQueryUI脚本代码是这样的：

jQuery(document).ready(function() {

    $( "#dialog" ).dialog();

});

我已将此脚本保存到文件 popup.js。

然后我使用以下代码将脚本加入队列，它工作正常，因为我可以在我的网页的 HTML 源代码中看到该脚本：

function my_popup_script() {
    wp_enqueue_script(
        'my-popup-script',
        get_stylesheet_directory_uri() . '/js/popup.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_popup_script' );

我不确定在这个过程中哪里出错了。感谢您的帮助。

Answer 1

这只是一个 jquery conflict，试试这个：

jQuery(document).ready(function() {

    jQuery( "#dialog" ).dialog();

});

如果要将jquery对象用作$符号，可以使用jquery noConflict 函数，只需将此行放在所有jquery代码之前：

var $ = jQuery.noConflict();

如果你想让它在点击事件时弹出，你可以使用：

var $ = jQuery.noConflict();
$(document).ready(function() {    
    $('.the_button').click(function(){     
        $( "#dialog" ).dialog();
    });    
});

在 WordPress 页面上加载 jqueryUI dialog() 函数

loading jqueryUI dialog() function on WordPress page

wordpress

dialog

jquery-ui