title: Modal/Pop up Box in HTML Email
body: <p>I am working on an HTML email, I made the HTML with many nested tables and a lot of CSS in the <code>&lt;head&gt;</code></p>
  
  <p>Passed it through a CSS inliner, but when I import my code into MailChimp, the modal box is not working.</p>
  
  <p>I've attached the code snippet. Please advise how to have this working inside of MailChimp.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;!--[if !mso]&gt;&lt;!--&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;!--&lt;![endif]--&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;&lt;/title&gt;
         &lt;style type="text/css"&gt;
  body {
      margin: 0 !important;
      padding: 0;
      background-color: #ffffff;
  }
  table {
      border-spacing: 0;
      font-family: sans-serif;
      color: #333333;
  }
  td {
      padding: 0;
  }
  img {
      border: 0;
  }
  div[style*="margin: 16px 0"] { 
      margin:0 !important;
  }
  .wrapper {
      width: 100%;
      table-layout: fixed;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
  }
  .webkit {
      max-width: 600px;
      margin: 0 auto;
  }
  .outer {
  Margin: 0 auto;
      width: 100%;
      max-width: 600px;
  }
  .full-width-image img {
      width: 100%;
      max-width: 600px;
      height: auto;
  }
  .inner {
  padding: 10px;
  }
  p {
      Margin: 0;
  }
  a {
      color: #ee6a56;
      text-decoration: underline;
  }
  .h1 {
      font-size: 21px;
      font-weight: bold;
      Margin-bottom: 18px;
  }
  .h2 {
      font-size: 18px;
      font-weight: bold;
      Margin-bottom: 12px;
  }
   
  /* One column layout */
  .one-column .contents {
      text-align: left;
  }
  .one-column p {
      font-size: 14px;
      Margin-bottom: 10px;
  }
  .two-column {
  text-align: center;
      font-size: 0;
  }
  .two-column .column {
  width: 100%;
      max-width: 300px;
      display: inline-block;
      vertical-align: top;
  }
  .contents {
  width: 100%;
  }
  .two-column .contents {
  font-size: 14px;
      text-align: left;
  }
  .two-column img {
      width: 100%;
      max-width: 280px;
      height: auto;
  }
  .two-column .text {
      padding-top: 10px;
  }
  .three-column {
      text-align: center;
      font-size: 0;
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .three-column .column {
      width: 100%;
      max-width: 200px;
      display: inline-block;
      vertical-align: top;
  }
  .three-column .contents {
      font-size: 14px;
      text-align: center;
  }
  .three-column img {
      width: 100%;
      max-width: 180px;
      height: auto;
  }
  .three-column .text {
      padding-top: 10px;
  }
  
  .box {
    position: relative;
    width: 40%;
    margin: 0 auto;
    background: rgba(255,255,255,0.2);
    padding: 35px;
    border: 2px solid #fff;
    border-radius: 20px/50px;
    background-clip: padding-box;
    text-align: center;
  }
  
  .modal {
    font-size: 1em;
    padding: 10px;
    color: #fff;
    border: 2px solid #06D85F;
    background: #06D85F;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
  }
  .modal:hover {
    background: #06D85F;
  }
  
  #b1 , #b2 {
  display:inline-block;
  text-align: center;
  margin-left: -7px;
  /**other codes**/
  }
  
  .button1 {
    font-size: 1em;
    padding: 10px;
    color: #ff0;
    border: 2px solid #06D85F;
    border-radius: 20px/50px;
    text-decoration:none;
  
    cursor: pointer;
    transition: all 0.3s ease-out;
  }
  .button1:hover {
    background: #06D85F;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
  }
  .overlay:target {
    visibility: visible;
    opacity: 1;
  }
  
  .popup {
    margin: 70px auto;
    padding: 20px;
      color: #ffffff;
    background: #fb5050;
    border-radius: 5px;
    width: 30%;
    height: 30%;
    position: relative;
    transition: all 5s ease-in-out;
  }
  
  .popup h2 {
    margin-top: 0;
    color: #ffffff;
    font-family: Tahoma, Arial, sans-serif;
  }
  .popup .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
  }
  .popup .close:hover {
    color: #06D85F;
  }
  .popup .content {
    display: block !important;
      max-height: 60%;
      overflow-y: auto;
  }
  
  @media screen and (max-width: 600px){
    .box{
      width: 70%;
    }
    .popup{
      width: 70%;
    }
  }
      &lt;/style&gt;
      &lt;!--[if (gte mso 9)|(IE)]&gt;
      &lt;style type="text/css"&gt;
          table {border-collapse: collapse;}
      &lt;/style&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;center class="wrapper"&gt;
          &lt;div class="webkit"&gt;
              &lt;!--[if (gte mso 9)|(IE)]&gt;
              &lt;table width="600" align="center"&gt;
              &lt;tr&gt;
              &lt;td&gt;
              &lt;![endif]--&gt;
              &lt;table class="outer" align="center" cellpadding="0" cellspacing="0" border="0"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;table class="outer" align="center"&gt;
                              &lt;tr&gt;
                                  &lt;td class="full-width-image"&gt;
                                      &lt;img src="Banner.jpg" width="600" alt="" /&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="one-column"&gt;
                          &lt;table width="100%"&gt;
                              &lt;tr&gt;
                                  &lt;td class="inner contents"&gt;
                                      &lt;p class="h1"&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
                                      &lt;p&gt;Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.&lt;/p&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="two-column"&gt;
                      &lt;!--[if (gte mso 9)|(IE)]&gt;
                      &lt;table width="100%"&gt;
                      &lt;tr&gt;
                      &lt;td width="50%" valign="top"&gt;
                      &lt;![endif]--&gt;
                          &lt;div class="column"&gt;
                              &lt;table width="100%"&gt;
                                  &lt;tr&gt;
                                      &lt;td class="inner"&gt;
                                          &lt;table class="contents"&gt;
                                               &lt;tr&gt;
                                                  &lt;td class="text"&gt;
                                                      Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                              &lt;tr&gt;
                                                  &lt;td&gt;
                                                    &lt;form class="box"&gt;
                                                        &lt;a class="modal" id="b1" href="#redirect"&gt;Action &lt;/a&gt;
                                                        &lt;a class="modal" id="b2" href="#popup"&gt;&amp;#94;&lt;/a&gt; 
                                                      &lt;/form&gt;
  
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                             
                                          &lt;/table&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;
                          &lt;/div&gt;
                      &lt;!--[if (gte mso 9)|(IE)]&gt;
                      &lt;/td&gt;&lt;td width="50%" valign="top"&gt;
                      &lt;![endif]--&gt;
                          &lt;div class="column"&gt;
                              &lt;table width="100%"&gt;
                                  &lt;tr&gt;
                                      &lt;td class="inner"&gt;
                                           &lt;table class="contents"&gt;
                                              &lt;tr&gt;
                                                  &lt;td&gt;
                                                      &lt;img src="1.png" width="280" alt="" /&gt;
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/table&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;
                          &lt;/div&gt;
                      &lt;!--[if (gte mso 9)|(IE)]&gt;
                      &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;![endif]--&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="two-column"&gt;
                     
                          &lt;div class="column"&gt;
                              &lt;table width="100%"&gt;
                                  &lt;tr&gt;
                                      &lt;td class="inner"&gt;
                                           &lt;table class="contents"&gt;
                                              &lt;tr&gt;
                                                  &lt;td&gt;
                                                      &lt;img src="2.png" width="280" alt="" /&gt;
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                            
                                          &lt;/table&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;
                          &lt;/div&gt;
                      &lt;!--[if (gte mso 9)|(IE)]&gt;
                      &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;![endif]--&gt;
                           &lt;!--[if (gte mso 9)|(IE)]&gt;
                      &lt;table width="100%"&gt;
                      &lt;tr&gt;
                      &lt;td width="50%" valign="top"&gt;
                      &lt;![endif]--&gt;
                          &lt;div class="column"&gt;
                              &lt;table width="100%"&gt;
                                  &lt;tr&gt;
                                      &lt;td class="inner"&gt;
                                          &lt;table class="contents"&gt;
                                              &lt;tr&gt;
                                                  &lt;td class="text"&gt;
                                                      Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                              &lt;tr&gt;
                                                  &lt;td&gt;
                                                    &lt;form class="box"&gt;
                                                        &lt;a class="modal" id="b1" href="#redirect"&gt;Action &lt;/a&gt;
                                                        &lt;a class="modal" id="b2" href="#popup"&gt;&amp;#94;&lt;/a&gt; 
                                                      &lt;/form&gt;
  
                                                      &lt;div id="popup" class="overlay"&gt;
                                                          &lt;div class="popup"&gt;
                                                              &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
                                                              &lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;
                                                              &lt;div class="content"&gt; 
                                                                  Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                                                  Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                                                  Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                                                  Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                                                  Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                                                  Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                                              &lt;/div&gt;
                                                          &lt;/div&gt;
                                                      &lt;/div&gt;
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                                
                                          &lt;/table&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;
                          &lt;/div&gt;
                      &lt;!--[if (gte mso 9)|(IE)]&gt;
                      &lt;/td&gt;&lt;td width="50%" valign="top"&gt;
                      &lt;![endif]--&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                              &lt;td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"&gt;
                                  &lt;table border="0" cellpadding="0" cellspacing="0" width="100%"&gt;
                                      &lt;tr&gt;
                                          &lt;td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;"&gt;
                                              &amp;reg; asdf, efgj 2013&lt;br/&gt;
                                              &lt;p&gt;lorem&lt;/p&gt;
                                              &lt;p&gt;Ipsum&lt;/p&gt;
                                          &lt;/td&gt;
                                          &lt;td align="right"&gt;
                                              &lt;table border="0" cellpadding="0" cellspacing="0"&gt;
                                                  &lt;tr&gt;
                                                      &lt;td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"&gt;
                                                          &lt;a href="http://www.twitter.com/" style="color: #ffffff;"&gt;
                                                              &lt;img src="tw.png" alt="Twitter" width="38" height="38" style="display: block;" border="0" /&gt;
                                                          &lt;/a&gt;
                                                      &lt;/td&gt;
                                                      &lt;td style="font-size: 0; line-height: 0;" width="20"&gt;&amp;nbsp;&lt;/td&gt;
                                                      &lt;td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"&gt;
                                                          &lt;a href="http://www.twitter.com/" style="color: #ffffff;"&gt;
                                                              &lt;img src="fb.png" alt="Facebook" width="38" height="38" style="display: block;" border="0" /&gt;
                                                          &lt;/a&gt;
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
                                              &lt;/table&gt;
                                          &lt;/td&gt;
                                          
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
              &lt;/table&gt;
              &lt;!--[if (gte mso 9)|(IE)]&gt;
              &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/table&gt;
              &lt;![endif]--&gt;
          &lt;/div&gt;
      &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>