莫代爾/彈出框的HTML電子郵件

我上的HTML郵件的工作，我做了很多嵌套表的HTML，並在<head>莫代爾/彈出框的HTML電子郵件

通過CSS內襯傳遞了很多CSS的，但是當我進口我的代碼進入MailChimp，模式框不起作用。

我附上了代碼片段。請告知如何在MailChimp中使用這個工具。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <!--[if !mso]><!--> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
 
    <!--<![endif]--> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title></title> 
 
     <style type="text/css"> 
 
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%; 
 
    } 
 
} 
 
    </style> 
 
    <!--[if (gte mso 9)|(IE)]> 
 
    <style type="text/css"> 
 
     table {border-collapse: collapse;} 
 
    </style> 
 
    <![endif]--> 
 
</head> 
 
<body> 
 
    <center class="wrapper"> 
 
     <div class="webkit"> 
 
      <!--[if (gte mso 9)|(IE)]> 
 
      <table width="600" align="center"> 
 
      <tr> 
 
      <td> 
 
      <![endif]--> 
 
      <table class="outer" align="center" cellpadding="0" cellspacing="0" border="0"> 
 
       <tr> 
 
        <td> 
 
         <table class="outer" align="center"> 
 
          <tr> 
 
           <td class="full-width-image"> 
 
            <img src="Banner.jpg" width="600" alt="" /> 
 
           </td> 
 
          </tr> 
 
         </table> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td class="one-column"> 
 
         <table width="100%"> 
 
          <tr> 
 
           <td class="inner contents"> 
 
            <p class="h1">Lorem ipsum dolor sit amet</p> 
 
            <p>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.</p> 
 
           </td> 
 
          </tr> 
 
         </table> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td class="two-column"> 
 
        <!--[if (gte mso 9)|(IE)]> 
 
        <table width="100%"> 
 
        <tr> 
 
        <td width="50%" valign="top"> 
 
        <![endif]--> 
 
         <div class="column"> 
 
          <table width="100%"> 
 
           <tr> 
 
            <td class="inner"> 
 
             <table class="contents"> 
 
              <tr> 
 
               <td class="text"> 
 
                Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
               </td> 
 
              </tr> 
 
              <tr> 
 
               <td> 
 
                <form class="box"> 
 
                 <a class="modal" id="b1" href="#redirect">Action </a> 
 
                 <a class="modal" id="b2" href="#popup">&#94;</a> \t 
 
                </form> 
 

 
               </td> 
 
              </tr> 
 
              
 
             </table> 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </div> 
 
        <!--[if (gte mso 9)|(IE)]> 
 
        </td><td width="50%" valign="top"> 
 
        <![endif]--> 
 
         <div class="column"> 
 
          <table width="100%"> 
 
           <tr> 
 
            <td class="inner"> 
 
             <table class="contents"> 
 
              <tr> 
 
               <td> 
 
                <img src="1.png" width="280" alt="" /> 
 
               </td> 
 
              </tr> 
 
             </table> 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </div> 
 
        <!--[if (gte mso 9)|(IE)]> 
 
        </td> 
 
        </tr> 
 
        </table> 
 
        <![endif]--> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td class="two-column"> 
 
        
 
         <div class="column"> 
 
          <table width="100%"> 
 
           <tr> 
 
            <td class="inner"> 
 
             <table class="contents"> 
 
              <tr> 
 
               <td> 
 
                <img src="2.png" width="280" alt="" /> 
 
               </td> 
 
              </tr> 
 
              
 
             </table> 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </div> 
 
        <!--[if (gte mso 9)|(IE)]> 
 
        </td> 
 
        </tr> 
 
        </table> 
 
        <![endif]--> 
 
         <!--[if (gte mso 9)|(IE)]> 
 
        <table width="100%"> 
 
        <tr> 
 
        <td width="50%" valign="top"> 
 
        <![endif]--> 
 
         <div class="column"> 
 
          <table width="100%"> 
 
           <tr> 
 
            <td class="inner"> 
 
             <table class="contents"> 
 
              <tr> 
 
               <td class="text"> 
 
                Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
               </td> 
 
              </tr> 
 
              <tr> 
 
               <td> 
 
                <form class="box"> 
 
                 <a class="modal" id="b1" href="#redirect">Action </a> 
 
                 <a class="modal" id="b2" href="#popup">&#94;</a> \t 
 
                </form> 
 

 
                <div id="popup" class="overlay"> 
 
                 <div class="popup"> 
 
                  <h2>Lorem Ipsum</h2> 
 
                  <a class="close" href="#">&times;</a> 
 
                  <div class="content"> \t 
 
                   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. 
 
                  </div> 
 
                 </div> 
 
                </div> 
 
               </td> 
 
              </tr> 
 
               
 
             </table> 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </div> 
 
        <!--[if (gte mso 9)|(IE)]> 
 
        </td><td width="50%" valign="top"> 
 
        <![endif]--> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
          <td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> 
 
           <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 
            <tr> 
 
             <td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;"> 
 
              &reg; asdf, efgj 2013<br/> 
 
              <p>lorem</p> 
 
              <p>Ipsum</p> 
 
             </td> 
 
             <td align="right"> 
 
              <table border="0" cellpadding="0" cellspacing="0"> 
 
               <tr> 
 
                <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"> 
 
                 <a href="http://www.twitter.com/" style="color: #ffffff;"> 
 
                  <img src="tw.png" alt="Twitter" width="38" height="38" style="display: block;" border="0" /> 
 
                 </a> 
 
                </td> 
 
                <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td> 
 
                <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"> 
 
                 <a href="http://www.twitter.com/" style="color: #ffffff;"> 
 
                  <img src="fb.png" alt="Facebook" width="38" height="38" style="display: block;" border="0" /> 
 
                 </a> 
 
                </td> 
 
               </tr> 
 
              </table> 
 
             </td> 
 
             
 
            </tr> 
 
           </table> 
 
          </td> 
 
         </tr> 
 
      </table> 
 
      <!--[if (gte mso 9)|(IE)]> 
 
      </td> 
 
      </tr> 
 
      </table> 
 
      <![endif]--> 
 
     </div> 
 
    </center> 
 
</body> 
 
</html>

來源

2016-09-16 behind13

你不應該在頭電子郵件中使用CSS，我認爲最好應該是全部內聯，元素爲'style =「」;'。此外，Bootstrap模式需要javascript才能工作......您的代碼中沒有指向Bootstrap文件的任何鏈接，它是否可以在yoru計算機上工作？無論如何，您無法在MailChimp中執行此操作。 – Lee

它不是一個引導模式，它只是一個CSS彈出類型的框不需要JS，是在我的瀏覽器中呈現完美。 – behind13

-1

/* Full-width input fields */ 
 
input[type=text], input[type=password] { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    box-sizing: border-box; 
 
} 
 

 
/* Set a style for all buttons */ 
 
button { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 14px 20px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 100%; 
 
} 
 

 
/* Extra styles for the cancel button */ 
 
.cancelbtn { 
 
    width: auto; 
 
    padding: 10px 18px; 
 
    background-color: #f44336; 
 
} 
 

 
/* Center the image and position the close button */ 
 
.imgcontainer { 
 
    text-align: center; 
 
    margin: 24px 0 12px 0; 
 
    position: relative; 
 
} 
 

 
img.avatar { 
 
    width: 20%; 
 
    border-radius: 50%; 
 
} 
 

 
.container { 
 
    padding: 16px; 
 
} 
 

 
span.psw { 
 
    float: right; 
 
    padding-top: 16px; 
 
} 
 

 
/* The Modal (background) */ 
 
.modal { 
 
    display: none; /* Hidden by default */ 
 
    position: fixed; /* Stay in place */ 
 
    z-index: 1; /* Sit on top */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; /* Full width */ 
 
    height: 100%; /* Full height */ 
 
    overflow: auto; /* Enable scroll if needed */ 
 
    background-color: rgb(0,0,0); /* Fallback color */ 
 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
 
    padding-top: 60px; 
 
} 
 

 
/* Modal Content/Box */ 
 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ 
 
    border: 1px solid #888; 
 
    width: 80%; /* Could be more or less, depending on screen size */ 
 
} 
 

 
/* The Close Button (x) */ 
 
.close { 
 
    position: absolute; 
 
    right: 25px; 
 
    top: 0; 
 
    color: #000; 
 
    font-size: 35px; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: red; 
 
    cursor: pointer; 
 
} 
 

 
/* Add Zoom Animation */ 
 
.animate { 
 
    -webkit-animation: animatezoom 0.6s; 
 
    animation: animatezoom 0.6s 
 
} 
 

 
@-webkit-keyframes animatezoom { 
 
    from {-webkit-transform: scale(0)} 
 
    to {-webkit-transform: scale(1)} 
 
} 
 
    
 
@keyframes animatezoom { 
 
    from {transform: scale(0)} 
 
    to {transform: scale(1)} 
 
} 
 

 
/* Change styles for span and cancel button on extra small screens */ 
 
@media screen and (max-width: 300px) { 
 
    span.psw { 
 
     display: block; 
 
     float: none; 
 
    } 
 
    .cancelbtn { 
 
     width: 100%; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Modal </title> 
 
</head> 
 
<body> 
 

 
<h2>Modal Login Form</h2> 
 

 
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button> 
 

 
<div id="id01" class="modal"> 
 
    
 
    <form class="modal-content animate" action="action_page.php"> 
 
    <div class="imgcontainer"> 
 
     <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span> 
 
     <img src="img/img_avatar2.png" alt="Avatar" class="avatar"> 
 
    </div> 
 

 
    <div class="container"> 
 
     <label><b>Username</b></label> 
 
     <input type="text" placeholder="Enter Username" name="uname" required> 
 

 
     <label><b>Password</b></label> 
 
     <input type="password" placeholder="Enter Password" name="psw" required> 
 
     
 
     <button type="submit">Login</button> 
 
     <input type="checkbox" checked="checked"> Remember me 
 
    </div> 
 

 
    <div class="container" style="background-color:#f1f1f1"> 
 
     <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button> 
 
     <span class="psw">Forgot <a href="#">password?</a></span> 
 
    </div> 
 
    </form> 
 
</div> 
 

 
<script> 
 
// Get the modal 
 
var modal = document.getElementById('id01'); 
 

 
// When the user clicks anywhere outside of the modal, close it 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
     modal.style.display = "none"; 
 
    } 
 
} 
 
</script> 
 

 
</body> 
 
</html>

來源

2016-09-16 15:10:26 hamidrun

以下是從頁的mailchimp網站上的HTML電子郵件的限制摘錄。

典型的電子郵件客戶端的查看技術不是最新的作爲網絡瀏覽器。 Web瀏覽器顯示交互式動態內容，並且它們經常更新。但互動元素如Flash， JavaScript或HTML表單在大多數電子郵件收件箱中都不起作用。

不要使用

下面的元素被幾乎所有主要的電子郵件客戶端阻止。支持要麼非常有限，要麼不存在。

的JavaScript

...

Limitations of HTML Email

參見HTML email with Javascript

來源

2016-09-16 15:54:56 ksav

莫代爾/彈出框的HTML電子郵件

回答

相關問題