0 Replies Latest reply on Aug 13, 2013 7:41 PM by gdavisdesign

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

    gdavisdesign Level 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");






      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:

      1. Uncaught TypeError: Object [object Object] has no method 'modal' portfolioButtonStage_edgeActions.js:4
        1. (anonymous function)portfolioButtonStage_edgeActions.js:4
        2. f.event.dispatchjquery-1.7.1.min.js:3
        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