同じウインドウでリダイレクトし、新しいウィンドウでリダイレクトするCSSを使用してください

私は、事前定義されたタグを除いてJavaスクリプトを書くことを許可しないAMPの苦情のページに取り組んでいるので、この目的のためにCSSを使用する必要があります。同じウインドウでリダイレクトし、新しいウィンドウでリダイレクトするCSSを使用してください

新しいウィンドウでモーダルポップアップhrefをクリックし、hrefリンクのURLを開く必要があります。

は、ラベルの付いたチェックボックスを使用するようないくつかのトリックを試みましたが、私の場合は機能しません。 hrefの上

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

クリック - >モーダル+新しいタブでリンクを開く

出典

2017-06-07 Arbaz Khan

リンクとボタンを組み合わせることができます。 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>

これは、クリックsuscribeにモーダルを開き、新しいウィンドウでStackOverflowのために行くことができます。

注意：ローカルファイルで実行します。そうしないと、「localStorage」がサポートされていないと不平を言います。

出典

2017-06-10 05:46:58 nitobuendia

をポップアップしますが、CSSでリンク先を変更することはできません。 target属性を<a>タグに追加する必要があります。

新しいタブ/ウィンドウの

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

を使用する必要があります。

また、モーダルを開くことはJavaScriptでのみ可能です。 CSSセレクタを使用することは可能かもしれませんが、実行するのは非常に難しいでしょう。

出典

2017-06-07 08:32:24 StuntHacks

あなたはヒントを提供できますか？どのように私はCSSで達成することができます –

私はエキスパートではありませんが、あなたがそれを含めると非常にハッキーで、おそらくすべてのブラウザで動作しません。ウェブマスターに連絡し、htmlを編集できるかどうか尋ねることをお勧めします。 @ArbazKhan – StuntHacks

同じウインドウでリダイレクトし、新しいウィンドウでリダイレクトするCSSを使用してください

答えて

関連する問題