// The modal plugin toggles your hidden content on demand,
// via data attributes or JavaScript.
// It also adds '.modal-open' to the <body> to override default
// scrolling behavior and generates a '.modal-backdrop' to provide
// a click area for dismissing shown modals when clicking outside the modal.
.modal { //All the modal area, covers overlay
//background-color: red;
.modal-dialog { //la caja exterior del modal
}
.modal-content { //el propio modal
border-radius: 0;
border: 0;
background-color: white;
}
.modal-header {
border-bottom: 0px;
}
.modal-title {
//@include sfe-form-label;
text-align: center;
color: blue;
}
.modal-body {
//@include rem(padding, 0 20px);
}
.modal-footer {
border-top: 0px;
}
}
// Overlay
.modal-backdrop {
background-color: red;
}
//Trigger modal programatically
$('.js-toggle-publish-in-sphere-modal').on('click', function(e){
e.preventDefault();
$('#js-modal-publish-in-sphere').modal('show');
//Si se nos queda por debajo del overlay, podemos appendear el modal a un contenedor superior, por ejemplo el body
$('#js-modal-publish-in-sphere').modal('show').appendTo('body');
});
//Trigger modal on load
$('#js-modal-login').modal('show');
//Prevent modal closing
$('#js-modal-login').modal({
backdrop: 'static', //prevent closing modal onclick outside
keyboard: false //prevent closing modal with esc button
}, 'show');
**TRICKS**
Vertically centered modals: http://codepen.io/dimbslmh/pen/mKfCc
If main container has 'position:fixed', modal appears under background overlay. Solutions: http://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background
<!--
When you trigger a modal, it also:
– Adds '.modal-open' class to the <body> to override default scrolling behavior
– Generates a '.modal-backdrop' to provide a click area for dismissing shown modals
-->
<!-- Button trigger modal -->
<button type="button" class="btn" data-toggle="modal" data-target="#js-modal-fru">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="js-modal-fru" tabindex="-1" role="dialog" aria-labelledby="Modal Fru" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="Modal Fru">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>