We use Remodal.js as the underlying implementation of the modal windows. It is lightweight and mobile first, and it is easier to extend if necessary in the future. The size of the modal window is relative to the screen size, and can be modified in CSS. We also provide auxiliary classes for various common use cases such as with and without a fixed header or footer. For more details, please refer to the Remodal.js documentation.
Note that we should stop using fancybox and start to use Remodal.js going forward for better mobile user experience.
// The modal
.modal.remodal{ 'data-remodal-id' => 'common-modal' }
.modal-header
%h2 Modal Header
.modal-close
%a{ href: '#' }
.modal-content
%p ...
.modal-footer
.row
.col-sm-6
%a.btn.btn-primary.btn-full-width Save the World
.col-sm-6
%a.btn.btn-secondary.btn-full-width Maybe Next Time
// The trigger
%a.btn.btn-small.btn-primary.btn-full-width{ 'data-remodal-target' => 'common-modal' } Open
// The modal
.modal.remodal.no-fixed-header{ 'data-remodal-id' => 'modal-no-fixed-header' }
.modal-header
%h2 Modal Header
.modal-close
%a{ href: '#' }
.modal-content
%p ...
.modal-footer
.row
.col-sm-6
%a.btn.btn-primary.btn-full-width Save the World
.col-sm-6
%a.btn.btn-secondary.btn-full-width Maybe Next Time
// The trigger
%a.btn.btn-small.btn-primary.btn-full-width{ 'data-remodal-target' => 'modal-no-fixed-header' } Open
// The modal
.modal.remodal.no-fixed-footer{ 'data-remodal-id' => 'modal-no-fixed-footer' }
.modal-header
%h2 Modal Header
.modal-close
%a{ href: '#' }
.modal-content
%p ...
.modal-footer
.row
.col-sm-6
%a.btn.btn-primary.btn-full-width Save the World
.col-sm-6
%a.btn.btn-secondary.btn-full-width Maybe Next Time
// The trigger
%a.btn.btn-small.btn-primary.btn-full-width{ 'data-remodal-target' => 'modal-no-fixed-footer' } Open
// The modal
.modal.remodal.no-fixed-header.no-fixed-footer{ 'data-remodal-id' => 'modal-no-fixed-header-and-footer' }
.modal-header
%h2 Modal Header
.modal-close
%a{ href: '#' }
.modal-content
%p ...
.modal-footer
.row
.col-sm-6
%a.btn.btn-primary.btn-full-width Save the World
.col-sm-6
%a.btn.btn-secondary.btn-full-width Maybe Next Time
// The trigger
%a.btn.btn-small.btn-primary.btn-full-width{ 'data-remodal-target' => 'modal-no-fixed-header-and-footer' } Open
// Custom CSS to override the default remodal styles
// Note the media query because of the mobile first approach
@media (min-width: $screen-sm-min) {
.smaller-modal {
width: 600px;
height: 400px;
}
}
// The modal
.modal.remodal.smaller-modal{ 'data-remodal-id' => 'custom-size-modal' }
.modal-header
%h2 Modal Header
.modal-close
%a{ href: '#' }
.modal-content
%p ...
.modal-footer
.row
.col-sm-6
%a.btn.btn-primary.btn-full-width Save the World
.col-sm-6
%a.btn.btn-secondary.btn-full-width Maybe Next Time
// The trigger
%a.btn.btn-small.btn-primary.btn-full-width{ 'data-remodal-target' => 'custom-size-modal' } Open