Show a Bootstrap Modal onLoad

Question

Have a series of page.handlebars that load dynamically into a {{{body}}} of a main layout.

On redirect of a page to certain pages, would like to show a Bootstrap Modal onLoad.

This would need to be within the body of the page, and the modalID is loaded dynamically.

This would seem to be correct, but what needs to be tweaked for it to work?

<script type="text/javascript">
  $(document).ready(function(){
    $('#{{activate.[0]}}').modal('show')
  });
</script>

Answer 1

This should work. I tried this.

$('#multi-file-dropzone-js').modal('show');

Answer 2

You can either read the id of modal in your javascript directly from the model files and then use it to open the modal. Or you can render the id in some hidden div(using handlebar) and can read the contents of that div and open the modal.

You can't use handlebar tags inside your js code.

Check out this fiddle: http://jsfiddle.net/CkAcL/

js

var source   = $("#a").html();
var template = Handlebars.compile(source);
var context = {modalid: "#mymodalid"};
var html    = template(context);

function openModal(){
 var mymodalid=$("#modalid").html();
    // use $(mymodalid).show();
}

//call openModal() inside your document.ready()