HTML 电子邮件中的模态/弹出框答案

【问题标题】：Modal/Pop up Box in HTML EmailHTML 电子邮件中的模态/弹出框
【发布时间】：2017-01-24 20:41:46
【问题描述】：

我正在处理 HTML 电子邮件，我在<head> 中使用许多嵌套表格和大量 CSS 制作了 HTML

通过 CSS 内联传递它，但是当我将代码导入 MailChimp 时，模式框不起作用。

我已附上代码 sn-p。请告知如何在 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>	
                                                    </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>	
                                                    </form>

                                                    <div id="popup" class="overlay">
                                                        <div class="popup">
                                                            <h2>Lorem Ipsum</h2>
                                                            <a class="close" href="#">&times;</a>
                                                            <div class="content">	
                                                                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>

【问题讨论】：

你不应该在邮件的头部使用 CSS，我认为理想情况下它应该是内联的，元素为 style="";。此外，Bootstrap 模态需要 javascript 才能工作......您的代码中没有任何指向 Bootstrap 文件的链接，这在 yoru 计算机上是否有效？无论如何，您将无法在 MailChimp 中执行此操作。
它不是引导模式，它只是一个 css 弹出框，不需要 JS，是的，在我的浏览器中它呈现得非常好。

标签： html css email mailchimp

【解决方案1】：

以下是 mailchimp 网站上HTML 电子邮件的限制页面的摘录。

典型电子邮件客户端的查看技术不是最新的作为网络浏览器。 Web 浏览器显示交互式动态内容，他们经常更新。但是像 Flash 这样的交互元素， JavaScript 或 HTML 表单无法在大多数电子邮件收件箱中使用。

请勿使用

几乎所有主要的电子邮件客户端都阻止了以下元素。支持要么极其有限，要么根本不存在。

JavaScript

...

Limitations of HTML Email

另见HTML email with Javascript

【讨论】：

【解决方案2】：

/* 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>

【讨论】：