Ractive Component Bootstrap Modal
Modal component for Ractive that uses Twitter Bootstrap's CSS.
Requirements
- Use
bootstrap
's stylesheets. - Add this to your stylesheets:
Usage
npm install skyrpex/ractive-components-bootstrap-modal --save-dev
app.js
;
app.hbs
<div class="container"> <h1>Ractive Bootstrap Modal</h1> <button type="button" class="btn btn-primary" on-click="toggle('showModal')">Show modal</button> <!-- Modal component --> <Modal show="{{showModal}}"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" on-click="toggle('showModal')" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" on-click="toggle('showModal')">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </Modal> </div>
Demo
Try the demo here.