10 examples of 'open modal popup on hyperlink click' in JavaScript

26
function openPopup (href) {
27
  if (window.popup && !window.closed) window.popup.close();
28
  var width = 1000;
29
  var height = 800;
30
  var x = (screen.width / 2) - (width / 2);
31
  var y = (screen.height / 2) - (height / 2);
32
  var win = new BrowserWindow({
33
    width, height, x, y,
34
    center: true,
35
    autoHideMenuBar: true,
36
    webPreferences: {
37
      webSecurity: true,
38
      nodeIntegration: false,
39
      plugins: true,
40
    },
41
  });
42
  win.id = 'popup';
43
  win.loadURL(href);
44
  window.win = win;
45
  /*
46
  nw.Window.open('app/popup.html?href=' + encodeURIComponent(href), {x: left, y: top, width: w, height: h},
47
  function (win) {
48
    window.popup = win.window;
49
50
    // do not open the window and open it in external browser
51
    win.on('new-win-policy', function (frame, url, policy) {
52
      policy.ignore();
53
      nw.Shell.openExternal(url);
54
    });
55
56
    win.window.id = 'popup';
57
    win.window.config = App.config;
58
    win.focus();
59
  });
60
  */
61
}

21
function popup(mylink, windowname)
22
{
23
	if (! window.focus)
24
	{
25
		return true;
26
	}
27
	var href;
28
	if (typeof(mylink) == 'string')
29
	{
30
		href=mylink;
31
		window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
32
		return false;
33
	}
34
	else
35
	{
36
		href=mylink.href;
37
		window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
38
		return false;
39
	}
40
}

56
openLinkInPopup(URL) {
57
    window.open(URL, '', 'width=500, height=500');
58
}

54
function launchPopup() {
55
  let w = window.open(window.location.href);
56
  remoteAddMessage = windtalk.link(w);
57
  launchPanel.style.display = "none";
58
  mainPanel.style.display = "";
59
}

18
public onClick(): boolean {
19
    window.open(this.url, '_target', 'location=no,toolbar=no,width=500,height=500,left=100,top=100;');
20
21
    return false;
22
}

8
function popup_open(link,width,height,posX,posY,elemWidth) {
9
	var root = (top.frames[2]) ? top.frames[2].document : document;
10
    popup_close();
11
    var popup = document.createElement('iframe');
12
    popup.id = 'popup';
13
    popup.src = link;
14
    popup.style.cssText = 'display:block; top:0px; left:0px; position:fixed; z-index:1; border: 1px solid;';
15
    popup.height = height;
16
    popup.width = width;
17
    posX = posX - root.body.scrollLeft;
18
    if ( posX > root.body.scrollWidth/2 )
19
        posX = posX - width;
20
    else
21
        posX = posX + elemWidth;
22
    popup.style.left = posX;
23
	if( ( posY + height ) > root.body.scrollHeight )
24
		posY = root.body.scrollHeight - 1.1 * height;
25
	posY = posY - root.body.scrollTop;
26
	posY = ( posY > 0 ) ? posY : 0;
27
    popup.style.top = posY;
28
    root.body.appendChild(popup);
29
};

1
function openPopup (url, width) {
2
    var left, top, height,
3
        screenLeft = screen.availLeft || 0,
4
        bordersWidth = 8;
5
    // if browser window is in the right half of screen, place new window on left half
6
    if (window.screenX - screenLeft - bordersWidth * 1.5 > width) {
7
        left = window.screenX - width - bordersWidth * 1.5;
8
    // if browser window is in the left half of screen, place new window on right half
9
    } else if (window.screenX + window.outerWidth + width + bordersWidth * 1.5 < screenLeft + screen.availWidth) {
10
        left = window.screenX + window.outerWidth + bordersWidth;
11
        // if screen is small or browser window occupies whole screen, place new window on top of current window
12
    } else {
13
        left = window.screenX + window.outerWidth / 2 - width / 2;
14
        if (left < 0) {
15
            left = 0;
16
        }
17
    }
18
    top = window.screenY;
19
    height = window.innerHeight;
20
    var features = 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top;
21
    features += ',resizable,scrollbars';
22
    // to open single instance replace null with some string
23
    window.open(url, null, features)
24
        .focus();
25
}

1
export default function popup(url, width = 800, height = 600, name = '') {
2
    const left = (window.screen.width - width) / 2;
3
    const top = (window.screen.height - height) / 2;
4
    // const left = (window.screen.availWidth - width) / 2;
5
    // const top = (window.screen.availHeight - height) / 2;
6
    const defaults = 'directories=no,location=no,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no';
7
    const params = `width=${width},height=${height},top=${top},left=${left},${defaults}`;
8
    const win = window.open(url, name, params);
9
    if (win === null || typeof win === 'undefined') {
10
        return false;
11
    }
12
    if (window.focus) {
13
        win.focus();
14
    }
15
    return true;
16
}

9
function popup(url) {
10
    newwindow = window.open(url, 'name', 'height=400,width=400,menubar=false,resizable=false,scrollbars=false, status=false, titlebar=false, toolbar=false');
11
    if (window.focus) { newwindow.focus() }
12
    return false;
13
}

4
function popUp(URL) {
5
         day = new Date();
6
         id = day.getTime();
7
         eval("page = window.open(URL, 'xqdoccode', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=600,height=400,left = 412,top = 334');")
8
         page.focus();
9
}