Modals
The styling is in "scss/custom-bootstrap/_pattern-modals.scss"
For how-to's, please read the Bootstrap modal pattern.
Slide-in Panel
Magento «Slide-in panel» pattern is an extension of regular Bootstrap modal. It is defined by the slide-in
class added to the modal wrapper.
Be sure to add an id to your modal in order to open it with a button. The corresponding button should have an data-toggle="modal"
and data-target="#modal-id"
attributes in order to open modals.
<button class="btn" data-toggle="modal" data-target="#slide-in-example">Show slide-in panel</button> <div class="modal slide-in" id="slide-in-example" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button> <h2 class="modal-title">Modal title</h2> <div class="button-bar"> <a href="#" class="btn btn-link btn-lg" data-dismiss="modal">Close</a> <button class="btn btn-secondary btn-lg">Secondary</button> <button class="btn btn-primary btn-lg">Primary</button> </div> </div> <div class="modal-body"> Modal content here </div> </div> </div> </div>