How to open a link in new window(not in new tab) in Html/css

Question

To open link in new tab you do this:

<a href="#" target="_blank">open in new tab</a>

But how can I made it open in a new window?

So, help me out to overcome this problem.

It's very poor UX to decide how and when new windows (or tabs) should open. That decision should be left to the user, — Paulie_D, Oct 28 '13 at 11:51
This is the answer: http://stackoverflow.com/a/15766254/458614 — tobek, Jan 14 '14 at 18:08

score 1 · Answer 1 · answered Oct 28 '13 at 11:59

i think yo want to open a completely new window on clicking a link.in other words u want a popup.try the following code.

<script language="javascript" type="text/javascript">
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
   }

<a href="popupex.html" onclick="return popitup('popupex.html')">Link to popup</a>

score 1 · Answer 2 · answered Oct 28 '13 at 12:15

This works in theory but it will depend on the preferences set in the browser. Now a days you can fake a new window by using div's and Layers. Is there anyway to implement a layer that hides what is behind it.

JavaScript:

function getElementsByClass( searchClass, domNode, tagName) { 
    if (domNode == null) domNode = document;
    if (tagName == null) tagName = '*';
    var el = new Array();
    var tags = domNode.getElementsByTagName(tagName);
    var tcl = " "+searchClass+" ";
    for(i=0,j=0; i<tags.length; i++) { 
    var test = " " + tags[i].className + " ";
    if (test.indexOf(tcl) != -1) 
        el[j++] = tags[i];
} 
return el;
}
// paste getElementsByClass function (see above) here 

function showtab(tabname) 
{ 
// hide every element with class 'box1'  
var tabs = getElementsByClass('box1');
for(i=0; i<tabs.length; i++) {
    tabs[i].style.display = 'none';
    //tabs[i].style.visibility = 'hidden';
}
// hide every element with class 'box1'      
var tabs2 = getElementsByClass('myStyle');
for(i=0; i<tabs2.length; i++) {
    tabs2[i].style.display = 'none';
    //tabs2[i].style.visibility = 'hidden';
}

document.getElementById(tabname).style.display='block';
//document.getElementById(tabname).style.visibility='visible';
// show element with given tabname 
} 

function showsubtab(tabname)
{
//hide every element with class 'myStyle'
var tabs = getElementsByClass('myStyle');
for(i=0; i<tabs.length; i++) {
    tabs[i].style.display = 'none';
    //tabs[i].style.visibility = 'hidden';
}
document.getElementById(tabname).style.display='block';
//document.getElementById(tabname).style.visibility='visible';
}

if (window.addEventListener) { // Mozilla, Netscape, Firefox
window.addEventListener('load', showmessage, false);
} else if (window.attachEvent) { // IE
window.attachEvent('onload', showmessage);
}

function showmessage() {
document.getElementById('box').style.display='block';
document.getElementById('div1').style.backgroundColor='grey';
document.getElementById('div1').style.opacity = 0.2;
document.documentElement.style.overflow = "hidden"; //firefox, chrome
document.body.scroll = "no"; // ie only
var bodyLayer = document.getElementById('div1');
DisableLinks(bodyLayer);
}
function hidemessage() {
document.getElementById('box').style.display='none';
document.getElementById('div1').style.backgroundColor='transparent';
document.getElementById('div1').style.opacity = 1.0;
document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
var bodyLayer = document.getElementById('div1');
EnableLinks(bodyLayer);
}

function DisableLinks(dom) {
if(undefined != dom){
    links=dom.getElementsByTagName('A');
} else {
    links=document.getElementsByTagName('A');
}

for(var i=0; i<links.length; i++) {
    links[i].style.pointerEvents="none";
}
}

function EnableLinks(dom) {
if(undefined != dom){
    links=dom.getElementsByTagName('A');
} else {
    links=document.getElementsByTagName('A');
}

for(var i=0; i<links.length; i++) {
    links[i].style.pointerEvents="auto";
}
}

HTML

<div id="box">
<section id="close">
<section id="title">Important Site Message</section>
<section id="button"><a href="#" onClick="hidemessage();">[X]</a>&nbsp;</section>
</section>
<!--Body of the Message-->
</div>

CSS #box {position: absolute; top: 50%; left: 50%; height: 15.625em; width: 25em; background-color:#FFF; margin-top: -7.8125em; margin-left: -12.5em; display: none; overflow: auto; border-color:#000; border-style:ridge; border-width:medium; z-index: 3; color: #000;} #close {border-bottom: inset thick #CCC; background-color: #000; width: inherit; height: 1.2em; color: #FFF; position: fixed;} #close a:visited {color: #FFF;} #close a:hover {color: red; text-decoration:none;} #close #title {text-align: center; font-weight:bold; width: 90%; padding: 1 1 1 1; clear: left; float: left; background-color:#000; color:#FFF;} #close #button {text-align: right; padding: 1 1 1 1; width: 10%; clear: right; float: right; background-color: #000; color: #FFF;}

score 1 · Answer 3 · answered Oct 28 '13 at 22:20

1

try this:

<a href="#nul" onclick="window.open('newLink.html ','','Toolbar=1,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0,Width=550,Height=400');">Name</A>

answered Oct 28 '13 at 22:20

BordiArt

756
8
20

score 0 · Answer 4 · answered Oct 28 '13 at 11:49

0

<script>
function openWin()
{
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>This is 'myWindow'</p>");
myWindow.focus();
}
</script>

Refer more over here

answered Oct 28 '13 at 11:49

N20084753

2,130
2
17
12

score 0 · Answer 5 · answered Oct 28 '13 at 11:59

0

If you specify the width and height when you call window.open, most browsers will open the link in a new window rather than a tab.

window.open(url, '_blank', 'width=500,height=400');

Live Demo

answered Oct 28 '13 at 11:59

Vinay Pratap Singh Bhadauria

9,829
3
28
49

score 0 · Answer 6 · answered Nov 20 '13 at 05:02

0

Use below code myWindow=window.open('https://www.google.co.in/','','width=500,height=500');

answered Nov 20 '13 at 05:02

srinath

9
4

score -2 · Answer 7 · answered Oct 28 '13 at 12:00

-2

usetarget="_blank" inside the "a" tag

answered Oct 28 '13 at 12:00

MJK

17
3

How to open a link in new window(not in new tab) in Html/css

7 Answers7