How to use onclick in amp page

I'm trying to convert my current page to an AMP page but I'm having some trouble with onclick attributes.

Is there anyway to add that functionality in AMP page?

Below is the tag I want to convert;

<img src="theSrc"
     alt=""
     onclick="window.open('link', 'Popup','toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=580, height=600, top=30')"
     style="cursor:pointer"
     id="someID"
/>

Solution

Your code seems that you want to show Image, Link and Popup

<img src="theSrc"
     alt=""
     onclick="window.open('link', 'Popup','toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=580, height=600, top=30')"
     style="cursor:pointer"
     id="someID"
/>

You can achieve your goal by combination of amp-img, amp-lightbox and amp-iframe

Here is the working Url

Code :

<!doctype html>
<html amp>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="popup.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
   <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
     <style amp-custom>
    .lightbox {
      background: rgba(0,0,0,0.8);
      width: 580px;
      height: 600px;
      margin:30px auto;
      padding:30px;
      position:relative;
    }
    .close { position:absolute; right:5px; top:5px; color: red;    font-family: arial;    font-size: 25px;} 

  </style>

 </head>
 <body>


  <amp-lightbox id="Popup" layout="nodisplay">
    <div class="lightbox" >
      <span class="close" on="tap:Popup.close" role="button" tabindex="0">X</span>
      <amp-iframe width="580" title="Animated dancing GIF from Giphy"
                          height="600"
                          layout="responsive"
                          sandbox="allow-scripts allow-same-origin allow-popups"
                          frameborder="0"
                          src="https://giphy.com/embed/DKG1OhBUmxL4Q">
    <amp-img layout="fill"
    src="https://i.vimeocdn.com/video/536538454_640.webp"
    placeholder></amp-img>
    </amp-iframe>
    </div>
  </amp-lightbox>
  <span class="ampstart-btn caps m2" on="tap:Popup" role="button" tabindex="0">
    <amp-img src="https://dummyimage.com/200x50/ff0000/ffffff&text=Click+Here+Image" width="200" height="50" layout="fixed"></amp-img>
  </span>


 </body>
</html>