相同 window 中的模式和新 window 中的重定向 href 仅使用 css

Question

我正在处理 AMP 投诉页面，该页面不允许编写 java 脚本，但其预定义的标签除外，因此我必须为此目的使用 css。

我需要打开模式弹出 href 单击并在新 window 中打开 href link 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 --> 模式弹出 + link 在新标签页中打开

Answer 1

您无法在 CSS 中更改 link 的目的地。您必须将 target-属性添加到 <a>-标签。

你必须使用

<a href="#" target="_blank"></a>

新 tab/window.

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

Answer 2

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

我做了以下修改：

替换他们的按钮以添加新的 window link:

<button class="lightClick" on="tap:my-lightbox" role="button" tabindex="0"> <a href="https://whosebug.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://whosebug.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>

这将在点击订阅时打开一个模态框，并以新的 window 将您带到 Whosebug。

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

相同 window 中的模式和新 window 中的重定向 href 仅使用 css

modal in same window and redirection in new window on href click using css only

html

css

amp-html