在后台選項卡中打開鏈接而不會失去焦點

Question

我制作了一個模式彈出窗口，顯示我網站上的優惠券代碼，該按鈕鏈接到優惠頁面。 我希望優惠頁面在后台選項卡中打開，而不會失去對我的頁面的關注。 有什么辦法嗎？ 這是我的模態彈出按鈕顯示優惠券代碼和購買的工作鏈接，謝謝。

 function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); alert("Text Copied"); }

 .coup-button { font-size: 1.25em; padding: 15px; background: #dc3545; color:#fff; border-radius: 8px; text-decoration: none; cursor: pointer; transition: all 0.3s ease-out; } .coup-button:hover { border: #dc3545 solid; color:#dc3545; background: #fff; } .coup-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .coup-overlay:target { visibility: visible; opacity: 1; } .coup-popup { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; } .coup-popup h4 { margin-top: 0; color: #333; } .coup-popup .coup-close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .coup-popup .coup-close:hover { color: #dc3545; } .coup-popup .coup-content { max-height: 30%; overflow: auto; } .coup-copybutton{width: auto; height: auto; background: #dc3545; color: white; border: none;cursor: pointer; border-radius: 8px; outline: none; padding:10px; box-sizing: border-box;} @media screen and (max-width: 700px){ .coup-popup{ width: 70%; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a class="coup-button" href="https://www.pmbypm.com/best-pmp-exam-simulator/" target="_blank" onclick="location.href='#popup1'">Reveal Coupon Code</a> <div id="popup1" class="coup-overlay"> <div class="coup-popup"> <h4>Here is your Coupon Code</h4> <a class="coup-close" href="#">&times;</a> <div class="coup-content" style="text-align: center;"> <p id="p1"><strong>UDEMYPM30</strong></p> <button class="coup-copybutton" onclick="copyToClipboard('#p1')">Copy Text</button> </div> </div> </div>

Answer 1

試試window.open('link', 'name');

 function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); alert("Text Copied"); } function openView() { location.href='#popup1'; window.open('https://stackoverflow.com/questions/60432716/', 'name'); }

 .coup-button { font-size: 1.25em; padding: 15px; background: #dc3545; color:#fff; border-radius: 8px; text-decoration: none; cursor: pointer; transition: all 0.3s ease-out; } .coup-button:hover { border: #dc3545 solid; color:#dc3545; background: #fff; } .coup-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .coup-overlay:target { visibility: visible; opacity: 1; } .coup-popup { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; } .coup-popup h4 { margin-top: 0; color: #333; } .coup-popup .coup-close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .coup-popup .coup-close:hover { color: #dc3545; } .coup-popup .coup-content { max-height: 30%; overflow: auto; } .coup-copybutton{width: auto; height: auto; background: #dc3545; color: white; border: none;cursor: pointer; border-radius: 8px; outline: none; padding:10px; box-sizing: border-box;} @media screen and (max-width: 700px){ .coup-popup{ width: 70%; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a class="coup-button" href="https://www.pmbypm.com/best-pmp-exam-simulator/" target="_blank" onclick="openView()">Reveal Coupon Code</a> <div id="popup1" class="coup-overlay"> <div class="coup-popup"> <h4>Here is your Coupon Code</h4> <a class="coup-close" href="#">&times;</a> <div class="coup-content" style="text-align: center;"> <p id="p1"><strong>UDEMYPM30</strong></p> <button class="coup-copybutton" onclick="copyToClipboard('#p1')">Copy Text</button> </div> </div> </div>