Adding a popup to a button

JavaScript
1

I have created a mailchimp popup signup for and I want to add it to a button so that when you press the button the form pops up.

How do I add the popup code to the button?

Popup code:

<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us11.list-manage.com","uuid":"e4be5c5b3b99ec331319ad930","lid":"30ab8a0ef9"}) })</script>

My button code:

<a href='#' class='tp-button orange large'><span style="font-size:26px;">Take The Checklist Challenge</span></a>
2

is this possible?

3

Sure it is : )

Just stick the inline JS in a function and call it when the button is clicked:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="">
    <style></style>
  </head>
  <body>

    <button>Click Me</button>

    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js"
            data-dojo-config="usePlainJson: true, isDebug: false">
    </script>
    <script>
      function displayPopup(){
        require(["mojo/signup-forms/Loader"], function(L){
          L.start({
            "baseUrl":"mc.us11.list-manage.com",
            "uuid":"e4be5c5b3b99ec331319ad930",
            "lid":"30ab8a0ef9"
          });
        });
      }

      $("button").on("click", displayPopup)
    </script>
  </body>
</html>

This works for me, although it is worth noting that the code you provide sets a cookie that means that the popup will only display once. If you want it to display more than once, you’ll need to clear that cookie.

HTH

1 Like
4

Interesting.

Manyt thanks

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.