Bootstrap modal在模板为avada的WordPress插件中不起作用

我试图开发一个简单的Wordpress插件，它显示一个引导模式，但不幸的是我失败了。

模态很快就会打开，但又会直接消失。之所以会出现这种情况，是因为模板Avada已经加载了类似于引导的内容。这会导致冲突，因为引导程序被多次加载。

我没有解决这个问题的办法。我想在我的插件中独立于使用的模板使用引导。

如果其他插件的开发人员包含引导程序，则每个引导程序文件将加载两次（或更多）。如果用户正在为主题或插件使用旧版本的引导，该怎么办？

是否有任何方法可以以正确的方式包含引导，从而不会产生冲突？

我希望你能帮助我。

    <?php
    /*
    * Plugin Name:       Bootstrap Modal Test
    * Plugin URI:        http://
    * Description:       This is a short description of what the plugin does. It\'s displayed in the WordPress admin area.
    * Version:           1.0.0
    * Author:            Test
    * Author URI:        http://
    */

    function enqueue_scripts() {
        wp_register_script( \'bootstrap_js\', plugins_url( \'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js\' ) );
        wp_enqueue_script( \'bootstrap_js\' );
        wp_register_script( \'jQuery\', plugins_url( \'https://code.jquery.com/jquery-3.3.1.slim.min.js\' ) );
        wp_enqueue_script( \'jQuery\' );
    }
    add_action( \'wp_enqueue_scripts\', \'enqueue_scripts\');

    function enqueue_styles() {
        wp_enqueue_style( \'bootstrap_css\', plugins_url(\'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css\') );
    }
    add_action( \'wp_enqueue_scripts\', \'enqueue_styles\');

    add_shortcode(\'modal_test\', \'modal_test_frontend\');

    function modal_test_frontend() {
        ?>
        <div class="container">
        <h2>Modal Example</h2>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
            </div>

        </div>
        </div>

    </div>

    <?php
    }

相关推荐