在后台选项卡中打开链接而不会失去焦点

Question

I made a modal popup that reveals coupon code on my website, and the button is linked to the offer page. I want the offer page to open in background tab without losing focus on my page. is there any way to do it? here is the working link for my modal popup on button reveal coupon code and buy , thank you.

 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

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