dimanche 3 septembre 2017

Bootstrap 4 beta's modals won't show using Laravel and Webpack

I'm having a simple issue, the modals won't show when i click the button and this is driving me crazy because there doesn't seem to be an error, i'm even using the demo on the website and nothing... Maybe that's because of the load with Webpack but there too i don't see an error, can someone explain to me what i'm doing wrong ?

webpack.mix.js

const { mix } = require('laravel-mix');



mix.js([
  'node_modules/jquery/dist/jquery.min.js',
  'node_modules/bootstrap/dist/js/bootstrap.js',
  'node_modules/http://ift.tt/2nqzFfD',
  'node_modules/datatables.net-buttons/js/dataTables.buttons.js',
  'node_modules/datatables.net-autofill/js/dataTables.autoFill.js',
  'resources/assets/js/app.js',
], 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');

bootstrap.js

try {
  window.$ = window.jQuery = require('jquery');


  require('datatables.net');
  require('datatables.net-autofill');
  require('datatables.net-buttons');
  require('bootstrap');
} catch (e) {}

view

<!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
                Launch demo modal
            </button>

            <!-- Modal -->
            <div class="modal hide fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire