All geek questions in one place

You must open the link in a new browser tab without leaving the current tab

I created a pop-up script where, if a user clicks on a specific link, it closes and opens a link to a new tab. What I'm trying to get is to stay in the parent window instead of the recently opened tab.

I googled a lot, but did not find a suitable answer.

The solution should work as follows: enter image description here

Here is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simple JQuery Modal Window from Queness</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { var id = '#dialog'; //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); //transition effect $(id).fadeIn(2000); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); //if mask is clicked $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); }); </script> <style type="text/css"> body { font-family:verdana; font-size:15px; } a {color:#333; text-decoration:none} a:hover {color:#ccc; text-decoration:none} #mask { position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none; } #boxes .window { position:absolute; left:0; top:0; width:440px; height:200px; display:none; z-index:9999; padding:20px; } #boxes #dialog { width:375px; height:203px; padding:10px; background-color:#ffffff; } </style> </head><body> <div id="boxes"> <div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window"> Simple Modal Window | <a class="close" onClick="window.open('http://google.com','').blur();">Close it</a> </div> <!-- Mask to cover the whole screen --> <div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div> </div> </body> </html>
+5
source share
1 answer

Browser security will not allow this ... sorry: - (

+2
source

Source: https://habr.com/ru/post/1234795/

More articles:


All Articles