モーダル/私はHTMLメールに取り組んでいます

が、私は多くのネストされたテーブルとHTMLとCSSインライナーを通してそれを渡さ<head>モーダル/私はHTMLメールに取り組んでいます

におけるCSSの多くを作ったHTMLメールにボックスをポップアップ、私はインポートするとき私のコードを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メールに取り組んでいます

答えて

関連する問題