Skip to content

Instantly share code, notes, and snippets.

@dperetti

dperetti/call_modal_client.js

Last active February 27, 2020 05:54
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save dperetti/f0d7115bc2a5e5c87196 to your computer and use it in GitHub Desktop.
Save dperetti/f0d7115bc2a5e5c87196 to your computer and use it in GitHub Desktop.
Download ZIP
Meteor Handlebars modal pattern
Raw
call_modal_client.js
Session.set('modalData', {template: "modal-backups", title: "Backup", files: [{name: "blah", date: new Date()}]});
$('#myModal').modal();
Raw
index.html
<head>
<title>Bootstrap based site</title>
</head>
<body>
{{> modal}}
</body>
Raw
modals.html
<!-- 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">&times;</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>
Raw
modals.js
Template.modal.helpers({
modalData: function() {
return Session.get('modalData')
}
});
@andrewlorenz
Copy link

hi there, this is great stuff - but there are 2 things:

  1. you don't include the removal of 'modalData' in the Session object that is needed when the modal is closed.
  2. how do you close the bootstrap modal down via code (e.g. because the modal is an input form with a submit function) ? I've tried to do this myself using $('#myModal').hide() but the underlying screen remains inaccessible (dimmed). I suspect its an issue of timing of the template being destroyed by Blaze and bootstrap doing its thing. Any ideas?

@EMHmark7
Copy link

The idea is to know what limitations we have, compared to bootstrap limitations stated here: http://getbootstrap.com/javascript/#modals

@kratam
Copy link

kratam commented Oct 9, 2015

Hi @alorenz65, have you found any solutions for your second point (close the modal when the form is saved)?

@scmorse
Copy link

scmorse commented Oct 23, 2015

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