RModal: Um modal javascript com apenas 1.2kb

leonardo

Em diversos projetos precisamos usar modais mais não queremos abrir mão do desempenho. O RModal é uma alternativa interessante para esses casos uma vez que é leve e não possui dependências.

veja um exemplo de como usa-lo:

<link rel="stylesheet" href="https://unpkg.com/rmodal/dist/rmodal.css" type="text/css" />
<script type="text/javascript" src="https://unpkg.com/rmodal/dist/rmodal.js"></script>
<style type="text/css">
.modal .modal-dialog {
width: 400px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var modal = new RModal(document.getElementById('modal'), {
//content: 'Abracadabra'
beforeOpen: function(next) {
console.log('Antes de abrir...');
next();
}
, afterOpen: function() {
console.log('Aberto');
}

, beforeClose: function(next) {
console.log('Antes de fechar....');
next();
}
, afterClose: function() {
console.log('Fechado');
}
// , bodyClass: 'modal-open'
// , dialogClass: 'modal-dialog'
// , dialogOpenClass: 'animated fadeIn'
// , dialogCloseClass: 'animated fadeOut'

// , focus: true
// , focusElements: ['input.form-control', 'textarea', 'button.btn-primary']

// , escapeClose: true
});

document.addEventListener('keydown', function(ev) {
modal.keydown(ev);
}, false);

document.getElementById('showModal').addEventListener("click", function(ev) {
ev.preventDefault();
modal.open();
}, false);

window.modal = modal;
}
</script>
<div id="modal" class="modal">
<div class="modal-dialog animated">
<div class="modal-content">
<form class="form-horizontal" method="get">
<div class="modal-header">
<strong>Yep, I'm a dialog...</strong>
</div>

<div class="modal-body">
<div class="form-group">
<label for="dummyText" class="control-label col-xs-4">Dummy text</label>
<div class="input-group col-xs-7">
<input type="text" name="dummyText" id="dummyText" class="form-control" />
</div>
</div>
</div>

<div class="modal-footer">
<button class="btn btn-default" type="button" onclick="modal.close();">Cancel</button>
<button class="btn btn-primary" type="submit" onclick="modal.close();">Save</button>
</div>
</form>
</div>
</div>
</div>

<a href="#" id="showModal" class="btn btn-success">Show modal</a>

Gostou? Acesse o site do RModal

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *