introduce .cancel class to quit modal windows

[JeanMertz]

In the modal window example there are two buttons, a primary button, usually linked to the action the modal warns/informs you about, and a secondary button, which is most widely known as the cancel button.

The modal window also has a button named × to close the modal window.

My question is, shouldn't there be an easy way to make the secondary button (or any button/element really) behave the same as the × link?

Right now this action is provided by the .close class, but this class inherits a lot of styling which messes with the btn class on the secondary button.

To overcome this problem, we could nintroduce a .cancel class, which inherits o styling, but instead is used in the following modal javascript code:

.delegate('.close, .cancel', 'click.modal', $.proxy(this.hide, this)) //bootstrap-modal.js - line 58

I realize the same can be achieved with some extra javascript, but I reckon this is an often applied situation which should be made as simple as possible.

[dsully]

This seems like a great addition to me. I spent a bit figuring how to do this given the current documentation.

[mdo]

We'll revisit this in the next release. One idea is making all classes that control behavior prefaced with .js-*. In this instance, it would be .js-dismiss and we'd just have to add that to whatever we want to dismiss or close the modal. We could also use a data attribute.

Thoughts?

[marcalj]

@markdotto +1

[dsully]

Mark: Sounds good to me!

[fat]

in 2.0-wip we're now relying more heavily on data-attributes in an attempt to decouple styles and javascript behavior. So to add close behavior you would just add data-modal-dismiss=true to whatever element you wanted to.

[JeanMertz]

Yes, that sounds great and a lot better than having to use classes all around. Looking forward to 2.0