How do you open a modal window from an Edge Animate button?

Question

I am trying to create an animated group of buttons that open a Bootstrap 3 modal window when clicked. The animation (OAM file) is placed on the Bootstrap page.
This code is added to Animate "CREATION COMPLETE" for button creation and button click:
// Button 1
var btn1 = sym.createChildSymbol("HomeButton", "menu");
   // Convert/store a reference to the symbol as a string representing the element name of the symbol instance.
var btn1_e = btn1.getSymbolElementNode();
   // Now can use that element string and convert it to a DOM element to use with jQuery to call its css properties
   // and adjust whatever you'd like, including its position property   
   sym.$(btn1_e).css({"position":"relative", "margin":"10"});
btn1.getVariable("setLabel")("Print Work");
btn1.getVariable("setDescription")("Examples of Telex advertisement");
btn1.$("MyImageBox").css("background" , "url(images/telexads_full269x151.jpg) no-repeat");
btn1.getSymbolElement().click(function() {
          console.log("button 1 was clicked");
document.getElementById("myModal");
$('#myModal').modal('show');
The div for the modal is on the main HTML page. I want to have the modal open a larger image of the button. Basically a lightbox for the Edge Animate stage, but it has to access the div on the parent HTML document (not the EdgeAnimate.html).
Here is the error from the Chrome Javascript console:
Uncaught TypeError: Object [object Object] has no method 'modal' portfolioButtonStage_edgeActions.js:4
(anonymous function)portfolioButtonStage_edgeActions.js:4
f.event.dispatchjquery-1.7.1.min.js:3
h.handle.i
I've tried Edge Commons Spotlight, but that doesn't open on the page correctly; it puts the image at the bottom of the main page.
Any ideas? Thanks

Answer 1

I am trying to create an animated group of buttons that open a Bootstrap 3 modal window when clicked. The animation (OAM file) is placed on the Bootstrap page.
This code is added to Animate "CREATION COMPLETE" for button creation and button click:
// Button 1
var btn1 = sym.createChildSymbol("HomeButton", "menu");
   // Convert/store a reference to the symbol as a string representing the element name of the symbol instance.
var btn1_e = btn1.getSymbolElementNode();
   // Now can use that element string and convert it to a DOM element to use with jQuery to call its css properties
   // and adjust whatever you'd like, including its position property   
   sym.$(btn1_e).css({"position":"relative", "margin":"10"});
btn1.getVariable("setLabel")("Print Work");
btn1.getVariable("setDescription")("Examples of Telex advertisement");
btn1.$("MyImageBox").css("background" , "url(images/telexads_full269x151.jpg) no-repeat");
btn1.getSymbolElement().click(function() {
          console.log("button 1 was clicked");
document.getElementById("myModal");
$('#myModal').modal('show');
The div for the modal is on the main HTML page. I want to have the modal open a larger image of the button. Basically a lightbox for the Edge Animate stage, but it has to access the div on the parent HTML document (not the EdgeAnimate.html).
Here is the error from the Chrome Javascript console:
Uncaught TypeError: Object [object Object] has no method 'modal' portfolioButtonStage_edgeActions.js:4
(anonymous function)portfolioButtonStage_edgeActions.js:4
f.event.dispatchjquery-1.7.1.min.js:3
h.handle.i
I've tried Edge Commons Spotlight, but that doesn't open on the page correctly; it puts the image at the bottom of the main page.
Any ideas? Thanks