利用javascript制作常见的弹出窗口

最新推荐文章于 2018-05-31 00:41:00 发布

原创最新推荐文章于 2018-05-31 00:41:00 发布 · 819 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #features #工具 #null #image

Javascript脚本技术专栏收录该内容

25 篇文章

订阅专栏

本文提供了一系列JavaScript函数，用于打开不同配置的新窗口，包括有状态栏、工具栏等的窗口及模式窗口，并支持返回值。此外，还介绍了如何实现自适应图片大小的弹出窗口。

//==========================================================================
//
// 代码描述：打开一个新的有状态栏、工具栏、菜单栏、定位栏，
//            可以改变大小，且位置居中的新窗口
//
// 传入参数：pageURL - 传递链接
//            innerWidth - 传递需要打开新窗口的宽度
//            innerHeight - 传递需要打开新窗口的高度
//
// 返回参数：无
//==========================================================================
function g_OpenSizeWindow(pageURL, innerWidth, innerHeight)
{
    var ScreenWidth = screen.availWidth
    var ScreenHeight = screen.availHeight
    var StartX = (ScreenWidth - innerWidth) / 2
    var StartY = (ScreenHeight - innerHeight) / 2
    window.open(pageURL, '', 'left='+ StartX + ', top='+ StartY + ', Width=' + innerWidth +', height=' + innerHeight + ', resizable=yes, scrollbars=yes, status=yes, toolbar=yes, menubar=yes, location=no')
}
//==========================================================================
//
// 代码描述：打开一个新的没有状态栏、工具栏、菜单栏、定位栏，
//            不能改变大小，且位置居中的新窗口
//
// 传入参数：pageURL - 传递链接
//            innerWidth - 传递需要打开新窗口的宽度
//            innerHeight - 传递需要打开新窗口的高度
//
// 返回参数：无
//==========================================================================
function g_OpenWindow(pageURL, innerWidth, innerHeight)
{
    var ScreenWidth = screen.availWidth
    var ScreenHeight = screen.availHeight
    var StartX = (ScreenWidth - innerWidth) / 2
    var StartY = (ScreenHeight - innerHeight) / 2
    window.open(pageURL, '', 'left='+ StartX + ', top='+ StartY + ', Width=' + innerWidth +', height=' + innerHeight + ', resizable=no, scrollbars=yes, status=no, toolbar=no, menubar=no, location=no')
}
//==========================================================================
//
// 代码描述：打开一个新的没有状态栏、工具栏、菜单栏、定位栏，
//            不能改变大小，且位置居中的新窗口
//
//
// 传入参数：pageURL - 传递链接
//            innerWidth - 传递需要打开新窗口的宽度
//            innerHeight - 传递需要打开新窗口的高度
//
// 返回参数：返回的数值
//
//==========================================================================
function g_OpenReturnWindow(pageURL, innerWidth, innerHeight)
{
    var ScreenWidth = screen.availWidth
    var ScreenHeight = screen.availHeight
    var StartX = (ScreenWidth - innerWidth) / 2
    var StartY = (ScreenHeight - innerHeight) / 2
    window.open(pageURL, '', 'left='+ StartX + ', top='+ StartY + ', Width=' + innerWidth +', height=' + innerHeight + ', resizable=no, scrollbars=yes, status=no, toolbar=no, menubar=no, location=no')
    return false
}

//==========================================================================================
//
// 代码描述：打开模式窗口函数，打开一个模式窗口不包含菜单、状态条、工具条、定位栏 ,并且返回值
//
// 传入参数：pageURL - 传递链接
//            innerWidth - 传递需要打开新窗口的宽度
//            innerHeight - 传递需要打开新窗口的高度
// 返回参数：模式窗体返回的returnValue
//
//
//==========================================================================================
function g_OpenreturnWindow(pageURL, innerWidth, innerHeight)
{
    var returnv;
    returnv=window.showModalDialog(pageURL, null, 'dialogWidth:' + innerWidth + 'px;dialogHeight:' + innerHeight + 'px;help:no;unadorned:no;resizable:no;status:no')
    return returnv;
}
//==========================================================================================
//
// 代码描述：打开模式窗口函数，打开一个模式窗口不包含菜单、状态条、工具条、定位栏
//
// 传入参数：pageURL - 传递链接
//            innerWidth - 传递需要打开新窗口的宽度
//            innerHeight - 传递需要打开新窗口的高度
// 返回参数：无
//
//
//==========================================================================================
function g_OpenReturnModalWindow(pageURL, innerWidth, innerHeight)
{
    window.showModalDialog(pageURL, null, 'dialogWidth:' + innerWidth + 'px;dialogHeight:' + innerHeight + 'px;help:no;unadorned:no;resizable:no;status:no');
    return false;
}
//==========================================================================================
//
// 代码描述：关闭窗口
//
// 传入参数：无
//
// 返回参数：无
//==========================================================================================
function g_CloseWindow()
{
    window.close()
    return false
}
自适应图片大小的弹出窗口
<script language="javascript" type="text/javascript">

</script>使用时将上面的代码放在网页文档的<head></head>标记对中，然后在链接的点击事件中调用OpenFullSizeWindow函数，如<a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,'','');return false"><img src="small.jpg"></a>即可。