Modal

To replace data-confirm dialogs and use our styled modal ones use this component. This is typically used for link_to that send (sometimes via Ajax) actions to the server that are destroying some data.

Example

Trigger element

Delete

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
%h5 Trigger element

//= link_to('#', data: { toggle: 'modal', target: '#confirm-modal' }, title: 'Delete a thing') do
%a{ href: '#', data: { toggle: 'modal', target: '#confirm-modal' }, title: 'Delete a thing' }
    %i.fas.fa-times-circle.text-danger
    Delete

.modal.fade#confirm-modal{ tabindex: -1, role: 'dialog', aria: { labelledby: 'confirm-modal-label', hidden: true } }
    .modal-dialog.modal-dialog-centered{ role: 'document' }
        .modal-content
            .modal-header
                %h5.modal-title#confirm-modal-label
                    Do you really want to delete a thing?
            .modal-body
                %p Please confirm that you want to delete a thing
                //= form_tag(some_path(thing), method: :post) do
                .modal-footer
                    %button.btn.btn-sm.btn-outline-secondary.px-4{ data: { dismiss: 'modal' } }
                        Cancel
                    //= submit_tag('Delete', class: 'btn btn-sm btn-danger px-4')
                    %input.btn.btn-sm.btn-danger.px-4{ type: "submit", name: "commit", value: "Delete", data: { disable: { with: "Delete" } } }