js弹出页面

最新推荐文章于 2023-09-30 18:36:46 发布

最新推荐文章于 2023-09-30 18:36:46 发布 · 225 阅读

文章标签：

#算法

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用JavaScript创建弹出窗口，并实现居中显示、最大化及调用父窗口方法等实用技巧。

js弹出页面:

function openAddUser(thisurl){
    	var url = thisurl;
	    var hWnd = window.open(url,"添加用户","width=760,height=450,resizable=no,scrollbars=yes") ;
	    hWnd.moveTo((screen.availWidth-760)/2,(screen.availHeight-450)/2) ;
    }

以上是父窗口,若要在弹出的窗口(子窗口)调用父窗口的js方法时:

window.opener.searchOnClick();

searchOnClick()即为父窗口的方法.

值得注意的是调用父窗口方法时一定要在关闭子窗口前,否则将不会调用父窗口的方法.

window.opener.searchOnClick();
 closeWindow();

function closeWindow(){
  window.opener=null;
  window.open("","_self");
  window.close(); 
 }

//添加用户
	function openAddTVStation(thisurl){   
        var url = thisurl;   
        // screen.availWidth 获得屏幕宽度
		// screen.availHeight 获得屏幕高度
		// 居中的算法是：
		// 左右居中： (屏幕宽度-窗口宽度)/2
		// 上下居中： (屏幕高度-窗口高度)/2
		var awidth=860;   //窗口宽度,需要设置
		var aheight=450;   //窗口高度,需要设置 
		var atop=(screen.availHeight - aheight)/2; //窗口顶部位置,一般不需要改
		var aleft=(screen.availWidth - awidth)/2; //窗口放中央,一般不需要改
		var param0="scrollbars=0,status=0,menubar=0,resizable=2,location=0"; //新窗口的参数
		//新窗口的左部位置，顶部位置，宽度，高度 
		var params="top=" + atop + ",left=" + aleft + ",width=" + awidth + ",height=" + aheight + "," + param0 ;
        var hWnd = window.open(url,"添加用户",params) ;
    }

点击按钮 弹出页面类似<a target="_blank">弹出</a>:

window.open("/action.do?method=method&id=${id}","_blank");

弹出页面最大化:
window.open(url,"","width="+(screen.availWidth-8)+",height="+(screen.availHeight-34)+",top=0,left=0");