Bootstrap Modal isn't working in WordPress Plugin with Template Avada [closed]

Question

I tried to develop a simple Wordpress plugin which shows a bootstrap modal and unfortunately I failed.

The modal opens shortly but disappears directly again. This happens because the template Avada already loads something similar to Bootstrap. This leads to the conflict because Bootstrap is loaded multiple times.

I have no solution for this problem. I would like to use Bootstrap in my plugin independent of the template used.

If other plugin's developers included Bootstrap, every Bootstrap files will be loaded twice (or more). What if the user is using an old version of Bootstrap for a theme or a plugin?

Is there any way to include Bootstrap the right way so it does not create a conflict?

I hope you can help me.

    <?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
    }

Answer 1

Sometimes it happens when the JavaScript for the Modal plugin gets loaded twice. Please check to make sure that it isn't getting double loaded. Some of the common ones are:

• bootstrap.js (the full BootStrap JS suite)
• bootstrap.min.js (same as above, just minified)
• bootstrap-modal.js (the standalone plugin)

Similar Problem.

Answer 2

I added this JS and it worked fine. https://code.jquery.com/jquery-3.3.1.slim.min.js