js弹出窗口

【2、经过设置后的弹出窗口】
　　
　　下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。
　　
　　<SCRIPT LANGUAGE="javascript">
　　
　　</SCRIPT>
　　
　　参数解释：
　　
　　<SCRIPT LANGUAGE="javascript"> js脚本开始；
　　window.open 弹出新窗口的命令；
　　'page.html' 弹出窗口的文件名；
　　'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
　　height=100 窗口高度；
　　width=400 窗口宽度；
　　top=0 窗口距离屏幕上方的象素值；
　　left=0 窗口距离屏幕左侧的象素值；
　　toolbar=no 是否显示工具栏，yes为显示；
　　menubar，scrollbars 表示菜单栏和滚动栏。
　　resizable=no 是否允许改变窗口大小，yes为允许；
　　location=no 是否显示地址栏，yes为允许；
　　status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
　　</SCRIPT> js脚本结束

【3、用函数控制弹出窗口】
　　
　　下面是一个完整的代码。
　　<html>
　　<head>
　　<script LANGUAGE="JavaScript">
　　
　　</script>
　　</head>
　　<body onload="openwin()">
　　任意的页面内容...
　　</body>
　　</html>

　　这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢？

　　方法一：<body onload="openwin()"> 浏览器读页面时弹出窗口；
　　方法二：<body onunload="openwin()"> 浏览器离开页面时弹出窗口；
　　方法三：用一个连接调用：
　　<a href="#" onclick="openwin()">打开一个窗口</a>
　　注意：使用的“#”是虚连接。
　　方法四：用一个按钮调用：
　　<input type="button" onclick="openwin()" value="打开窗口">

【6、弹出的窗口之定时关闭控制】
　　
　　下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入page.html的HTML中，不是主页面中)，让它10秒后自动关闭是不是更酷了？
首先，将如下代码加入page.html文件的<head>区：
　　<script language="JavaScript">
　　function closeit()
　　{
　　setTimeout("self.close()",10000) //毫秒
　　}
　　</script>
　　然后，再用<body onload="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)

JS 弹出模式窗口

一般来说，显示在最前面的窗口都是因为窗口被激活获得焦点，要使窗口永远显示在最前面，可以人为的设置窗口在blur时立刻focus，或者用模式、无模式对话框实现。

   　　具体步骤：

   　　方法一：弹出窗口<body>里加上代码：onblur="self.focus()"：

   <body onblur="self.focus()">

   　　方法二：用showModalDialog方法建立模式对话框，它的参数说明如表1.5.2所示。

   <script>
   function topwin(){
   window.showModalDialog("http://www.qq.com","","dialogWidth:300px;dialogHeight:300px;scroll:no;status:no")
   }
   </script>
   <button onClick="topwin()">打开模式窗口</button>

   　　方法三：用showModelessDialog方法建立无模式对话框，它的参数跟模式对话框完全一样，可以参考表1.5.2。

   <script>
   function topwin(){
   window.showModelessDialog("http://www.qq.com","","dialogWidth:300px;dialogHeight:300px;scroll:no;status:no")
   }
   </script>
   <button onClick="topwin()">打开无模式窗口</button>

   　　注意：模式对话框会始终保持焦点。除非关闭对话框，否则无法切换窗口。无模式对话框不会始终保持焦点，但始终保持显示在最前端。

   特别说明

   本例主要是模式对话框和无模式对话框的应用，必须注意两种对话框的异同。

   表1.5.2 showModalDialog方法的参数列表
   参数取值说明
   sURL必选项。字符串(String)。指定要载入和显示的 URL。
   vArguments可选项。字符串(String)。指定供显示文档时使用的变量。利用这个参数可以传递任何类型的值，包括包含多个值得的数组。对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。
   sFeatures可选项。字符串(String)。指定对话框的窗口装饰。使用下面的值。多个之间用分号隔开。
   dialogHeight : sHeight设置对话框的高度
   dialogLeft : sXPos设置对话框左上角相对于桌面的横坐标。
   dialogTop : sYPos设置对话框左上角相对于桌面的纵坐标。
   dialogWidth : sWidth设置对话框的宽度。
   center : yes | no | 1 | 0 | on | off指定对话框是否显示于桌面正中。默认值为 yes 。
   dialogHide : yes | no| 1 | 0 | on | off指定当打印或打印预览时对话框是否隐藏。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。
   edge : sunken | raised指定对话框窗口边框样式为凹下还是凸起的。默认值为 raised 。
   help : yes | no | 1 | 0 | on | off指定对话框是否显示上下文相关的帮助图标。默认值为 yes 。
   resizable : yes | no | 1 | 0 | on | off指定对话框是否可以被用户改变尺寸。默认值为 no 。
   scroll : yes | no | 1 | 0 | on | off指定对话框是否显示滚动条。默认值为 yes 。
   status : yes | no | 1 | 0 | on | off指定对话框是否显示状态条。对于不被信任的对话框默认值为 yes 。对于被信任的对话框默认值为 no 。
   unadorned : yes | no | 1 | 0 | on | off指定对话框是否显示 chrome 样式边框。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。

用cookie来控制来实现每次刷新页面或重新进入该页面，窗口只弹出一次

〈script〉

function openwin(){

window.open("page.html","","width=200,height=200")

}

function get_cookie(Name) {

var search = Name + "=";

var returnvalue = "";

if (documents.cookie.length 〉 0) {

offset = documents.cookie.indexOf(search) ;

if (offset != -1) {

offset += search.length ;

end = documents.cookie.indexOf(";", offset);

if (end == -1) {

end = documents.cookie.length;

}

returnvalue=(documents.cookie.substring(offset, end)) ;

}

return returnvalue;

}

function loadpopup(){

if (get_cookie(′popped′)==′′){

openwin()

documents.cookie="popped=yes"

}

〈/script〉

〈body onload="loadpopup()"〉页面加载时调用

posted @ 2013-11-26 22:31 时光与树阅读(457) 评论(0) 编辑收藏举报

刷新页面返回顶部

js弹出窗口

JS 弹出模式窗口

公告