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>