在 jQuery UI 中显示“关闭”按钮 - 带有 WP 的对话框

Question

我正在 wordpress 中使用jquery ui dialog 制作一个对话框。我遇到的问题是当对话框出现时，关闭按钮'X' 没有显示。示例如下。

我已经阅读了有关此问题的一些信息，这是由于bootstrap 上的冲突。 Reference on Stackoverflow.我想如何在wordpress上实现它？以下是我在functions.php 上制作的代码

function add_my_script() {     
   if(is_page('my_custom_page')){
     //Tried to deregister bootsrap and it work fine but I need the boostrap as well. 
     //wp_deregister_script('zerif_bootstrap_script');
     //Tried to degregister and enqueue back the script to follow the rules base on reference  
     //wp_enqueue_script('zerif_bootstrap_script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20120206', true);
     wp_enqueue_script('jquery-ui-dialog');
   }

}

add_action('wp_enqueue_scripts', 'add_my_script');

更新解决方案：

目前我在我的主题上使用 Zerif Lite，它位于 function.php。

wp_enqueue_script('zerif_bootstrap_script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20120206', false);

默认值为true，将放置在页脚中。我将值更改为 false，以便它与我的 jquery-ui 脚本一样放置在标题中。

Answer 1

发生这种情况的原因是因为您在调用 jquery-ui in 之后调用了 bootstrap in。

交换两者，而不是：

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

变成了

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

之后就可以正常使用了。