Skip to main content
bree403
bree403
Participant
March 28, 2017
Answered

Animate CC - button to trigger Bootstrap modal on webpage. Bootstrap Modal.

  • March 28, 2017
  • 6 replies
  • 2265 views

Hi,

I've just started using Animate CC. I’ll try to give you as much information as I can and see if anyone has any answers.

I’m trying to make a presentation in Animate. It is embedded on a website using an iframe.

The website is using bootstrap as a framework.

So I want to use the built in popup overlay that bootstrap uses to popup when you click on a button in my Animate presentation.

Normally I would just use this code to implement an overlay modal in an html page:

<!-- Trigger the modal with a button -->

  <button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

  <!-- Modal -->

  <div class="modal fade" id="myModal" role="dialog">

    <div class="modal-dialog">

   

      <!-- Modal content-->

      <div class="modal-content">

        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;</button>

          <h4 class="modal-title">Modal Header</h4>

        </div>

        <div class="modal-body">

          <p>Some text in the modal.</p>

        </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        </div>

      </div>

     

    </div>

  </div>

<script>

$(document).ready(function(){

    $("#myBtn").click(function(){

        $("#myModal").modal();

    });

});

</script>

Here is a functional example of it as well: Bootstrap Modal - Tryit Editor v3.3

I've tried using the "mouse click event" code snippet to see if I could alter it so it could be used but I must be doing something wrong.

I was just wondering if anyone could show any examples about how I would go about triggering the modal.

Let me know if I'm missing any information.

Thanks.

This topic has been closed for replies.
Correct answer kglad

yes.  you can use:

this.link1.addEventListener('click',f);

function f(){

$("#myModal").modal();

}

6 replies

bree403
bree403Author
Participant
April 3, 2017

Thanks for all the help everyone. Works great.

kglad
Community Expert
kgladCommunity Expert
Community Expert
April 4, 2017

you're welcome.

bree403
bree403Author
Participant
March 30, 2017

So is there any situation that think would work?

kglad
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
March 30, 2017

yes.  you can use:

this.link1.addEventListener('click',f);

function f(){

$("#myModal").modal();

}

bree403
bree403Author
Participant
March 29, 2017

@@@@@@@@@@I was using a code snippet called “Mouse Click Event”. I figured it was a good place to start.

This is the code that it adds to the actions keyframe:

/* Mouse Click Event

Clicking on the specified symbol instance executes a function in which you can add your own custom code.

Instructions:

1. Add your custom code on a new line after the line that says "// Start your custom code" below.

The code will execute when the symbol instance is clicked.

*/

this.link1.addEventListener("click", fl_MouseClickHandler_10.bind(this));

function fl_MouseClickHandler_10()

{

                // Start your custom code

                // This example code displays the words "Mouse clicked" in the Output panel.

                alert("Mouse clicked");

                // End your custom code

}

link1 is the name of the button that I’m using as an example as you can see.

I changed out the alert(“Mouse clicked”); to ("#test").modal(); and test is the name of the modal that I created.

I then export it as a Javascript/html files and then upload it to my website for testing.

But when I try to click on it when I’m testing it on the website it gives me a TypeError: “#test” .modal is not a function

I’m obviously missing something or maybe a lot of things. I’m pretty new to anything javascript. Ha. I’m just usually able to change a few parts of it to make it function how I need it to work… usually.

ClayUUID​

kglad
Community Expert
kgladCommunity Expert
Community Expert
March 30, 2017

is test the id of a dom element or the name of an animate object (eg, movieclip)?

if it's a dom element id, your reference is incorrect and if it's an animate object (as mentioned a few times) that won't work.

M
marjantrajkovski
Inspiring
March 29, 2017

When you set the target attribute to _parent, the hyperlink will open in the web page that is holding the iframe.

C
ClayUUID
Legend
March 29, 2017

The code you type in the actions window in a Canvas document is pure, unfiltered JavaScript (backed by the CreateJS library), so whatever code you normally use to make whatever happen should work just as well whether or not Animate content is present.

bree403
bree403Author
Participant
March 29, 2017

Hi Clayuuid. Thanks I guess I must being doing something wrong with the javascript and getting it to trigger the bootstrap modal. I've been looking online and can't seem to find a good example to learn from. Do you have any suggestions for websites to look at? Thanks.

kglad
Community Expert
kgladCommunity Expert
Community Expert
March 29, 2017

again, i think you'll need to overlay the element to which you want to apply modal() because the objects in animate are not dom elements.

ie, you'll need to add your modal element to the html published by animate and apply modal() to it.  you won't be able to apply modal() to a canvas object (eg, movieclip).

kglad
Community Expert
kgladCommunity Expert
Community Expert
March 29, 2017

i think you'll need to overlay the element to which you want to apply modal() because the objects in animate are not dom elements.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices