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

[bree403]

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.

[kglad]

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.

[ClayUUID]

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]

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]

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).

[ClayUUID]

bree403  wrote

Hi Clayuuid. Thanks I guess I must being doing something wrong with the javascript and getting it to trigger the bootstrap modal.

Well, what have you been doing to try to trigger it?

[marjantrajkovski]

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

[bree403]

@@@@@@@@@@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]

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.

[bree403]

So is there any situation that think would work?

[kglad · Accepted solution]

yes.  you can use:

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

function f(){

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

}

[bree403]

Thanks for all the help everyone. Works great.

[kglad]

you're welcome.