Question

我正在处理AMP投诉页面，除了预定义的标签之外，它们不允许编写java脚本，所以我必须为此目的使用css。

我需要在新窗口中打开模式弹出href单击并打开href链接URL。

尝试了一些技巧，例如使用带有标签的复选框，但在我的情况下不起作用。

    <label for="modal-1">this</label>
    <input class="modal-state" id="modal-1" type="checkbox" />
    <div class="modal">
    <label class="modal__bg" for="modal-1"></label>
<div class="modal__inner">
     <label class="modal__close" for="modal-1"></label>
     <h2>Caaaats FTW!</h2>
     <p><img src="" alt="" />Aliquam in sagittis nulla. Curabitur euismod diam eget risus venenatis, sed dictum lectus bibendum. Nunc nunc nisi, hendrerit eget nisi id, rhoncus rutrum velit. Nunc vel mauris dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fringilla quis nisi eget imperdiet.</p>
  </div>
</div>

点击href - ＆gt;模式弹出+链接在新标签页中打开

Answer 1

您无法更改CSS中链接的目的地。您必须将<a> - 属性添加到<a href="#" target="_blank"></a> - 代码。

你必须使用

~/.profile

用于新的标签/窗口。

此外，打开模式很可能只能通过JavaScript完成。可能有可能使用CSS选择器，但这样做非常困难。

Answer 2

您可以组合链接和按钮。在this post中，他们解释了如何在页面上创建灯箱（模态）。

我做了以下更改：

更换按钮以添加新窗口链接：

<button class="lightClick" on="tap:my-lightbox" role="button" tabindex="0"> <a href="https://stackoverflow.com" target="_blank">Subscribe</a> </button>
添加样式以保持相同的设计：

button a { color: #fff; text-decoration: none; }

整个输出：

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>Font example</title>

   <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

  <link rel="canonical" href="notification.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>

  <style amp-custom>

  button a {
    color: #fff;
    text-decoration: none;
  }

.lightbox {
         background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    }
    .lightbox h1 {
      color: white;
    }
    button.lightClick {
    background: orange;
    border: 1px solid orange;
    min-height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 20px;
    transform: rotate(90deg);
    position: fixed;
    left: 0;
    margin-left: -48px;
    margin-top: 350px;
    text-transform:uppercase;
    cursor:pointer;
        z-index: 9999;
}
 form.amp-form-submit-success [submit-success],
          form.amp-form-submit-error [submit-error]{
            margin-top: 16px;
        }
        form.amp-form-submit-success [submit-success] {
            color: green;
        }
        form.amp-form-submit-error [submit-error] {
            color: red;
        }
        form.amp-form-submit-success.hide-inputs > input {
            display: none
        }
.cansle {
    font-size: 26px;
    position: relative;
    right: -22px;
    /* z-index: 99999; */
    font-family: sans-serif;
    margin: -25px auto;
    /* opacity: 0.9; */
    text-align: right;
    cursor: pointer;
    color: orange;

}
.setUpForm {
    /* margin-top: 96px; */
    max-width: 450px;
    margin: 150px auto;
    min-height: 350px;
    padding: 30px;
    background-color: #fff;
    border: 1px solid orange;
    /* color: black; */
    margin: middle;
}
.setUpForm h2 {
    color: orange;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 28px;
}
.setUpForm form input {
    display: block;
    width: 100%;
    height: 35px;
    margin-bottom: 32px;
    padding: 2px 0px 2px 2px;
}
input.button.button-primary {
    /* text-align: center; */
    /* margin: 5px; */
    width: 140px;
    color: #fff;
    background: orange;
    border: 1px solid orange;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
}
   </style>
</head>
<body>
 <button class="lightClick" on="tap:my-lightbox"
      role="button"
      tabindex="0">
    <a href="https://stackoverflow.com" target="_blank">Subscribe</a>
  </button>


  <amp-lightbox id="my-lightbox"
      layout="nodisplay">
    <div class="lightbox">

    <div class="setUpForm">
    <div class="cansle" on="tap:my-lightbox.close"
        role="button"
        tabindex="0">X</div>
    <h2>Subscribe and get 20% off on your first order</h2>
     <form method="post"
      action=""
      target="_top">
    <input type="text"
        name="name"
        placeholder="Name..."
        required>
    <input type="email"
        name="email"
        placeholder="Email..."
        required>
    <input type="submit"
        value="Subscribe"
        class="button button-primary">
  </form>
  </div>
    </div>
  </amp-lightbox>
  </body>
  </html>

这将打开一个Modal on click suscribe，并在新窗口中转到stackoverflow。

注意：在本地文件中运行它，否则会抱怨不支持“localStorage”。

同一窗口中的模态和href上的新窗口中的重定向仅使用css单击

2 个答案: