Last active
February 27, 2020 05:54
-
-
Save dperetti/f0d7115bc2a5e5c87196 to your computer and use it in GitHub Desktop.
Meteor Handlebars modal pattern
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Session.set('modalData', {template: "modal-backups", title: "Backup", files: [{name: "blah", date: new Date()}]}); | |
| $('#myModal').modal(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <title>Bootstrap based site</title> | |
| </head> | |
| <body> | |
| {{> modal}} | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- A template to include in index.html that dynamically renders the a modal template --> | |
| <template name="modal"> | |
| {{#if modalData}} | |
| {{> Template.dynamic template=modalData.template data=modalData}} | |
| {{/if}} | |
| </template> | |
| <!-- A generic block to be used by our modals --> | |
| <template name="modalBlock"> | |
| <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="myModalLabel">{{ title }}</h4> | |
| </div> | |
| {{> Template.contentBlock }} | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| <!-- A specific modal template --> | |
| <template name="modal-backups"> | |
| {{#modalBlock title=title}} | |
| <div class="modal-body"> | |
| {{#each files}} | |
| {{ name }} –– {{ date}} | |
| {{/each}} | |
| </div> | |
| {{/modalBlock}} | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Template.modal.helpers({ | |
| modalData: function() { | |
| return Session.get('modalData') | |
| } | |
| }); |
Hi @alorenz65, have you found any solutions for your second point (close the modal when the form is saved)?
Session.set('modalData', null); should close the modal.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The idea is to know what limitations we have, compared to bootstrap limitations stated here: http://getbootstrap.com/javascript/#modals