Change background of buttons

[vovkats]

Does possibility exist to change background of buttons with options?

[vjt]

Not with options, but via CSS :)

[cschulte22]

You can change it with options - data-commit-class and data-cancel-class can be used to specify the bootstrap class for the button. For example, this will you give you a bootstrap primary button (blue by default):

<%= link_to "Not Dangerous", 
            @item,
            class: 'btn btn-default', 
            title: 'This is not scary', 
            data: {
              confirm: 'Are you sure?', 
              commit: 'Of Course', 
              'commit-class': 'btn-primary'
            } %>

[vjt]

Thanks, @cschulte22! :beers:

[adrianmann]

@cschulte22 Is there documentation for the classes you mentioned and any other ways of specifying styles in the confirm modal? I would like to change the size of the title text for example. Thanks.

[cschulte22]

There isn't documentation, but if you take a look at the source you can see all the options near the top: https://github.com/ifad/data-confirm-modal/blob/master/vendor/assets/javascripts/data-confirm-modal.js#L38-L52

In your case, it looks like you could provide the modal-class option that would get added to the modal that pops up. So just specify your class and then use CSS to change the size of the title text and whatever else you want to customize. Something like this:

html:

<%= link_to "Custom modal", @item, data: {'modal-class': 'large-header'} %>

scss:

.large-header {
  .modal-header {
    font-size: 20px;
  }
}