laravel-livewire-modals icon indicating copy to clipboard operation
laravel-livewire-modals copied to clipboard

Support for bootstrap 4

Open sbrow opened this issue 3 years ago • 4 comments

Any chance you could add support for bootstrap 4?

It seems all that needs to change is the javascript that you import:

// modals-bs4.js
let modalsElement = document.getElementById('laravel-livewire-modals');

$(modalsElement).on('hidden.bs.modal', () => {
  Livewire.emit('resetModal');
});

Livewire.on('showBootstrapModal', () => {
  $(modalsElement).modal('show');
});

Livewire.on('hideModal', () => {
  $(modalsElement).modal('hide');
});

Thanks, love the package!

sbrow avatar Nov 29 '21 22:11 sbrow

I was having trouble upgrading to bootstrap 5 so I used your script. Worked perfectly. Thank you =)

feliperafael avatar Jan 23 '22 21:01 feliperafael

Where do I put that javascript if you don't mind me asking?

seongbae avatar Mar 04 '22 04:03 seongbae

Where do I put that javascript if you don't mind me asking?

Put it in a separate script and import it after 'bootstrap'.

sbrow avatar Mar 04 '22 21:03 sbrow

Also, you have to modify the modal template a bit to prevent close on the escape key,

  1. publish the view (if you've not already done) php artisan vendor:publish --tag=laravel-livewire-modals:views
  2. modify data attributes to fit the BS v4 (remove extra bs) in resources/views/vendor/laravel-livewire-modals/modals.blade.php

eg: data-bs-backdrop="static" to data-backdrop="static"

madurapa avatar Jul 19 '22 10:07 madurapa