用JavaScript 制作多彩的弹出式说明窗口
在设计网站的时候,在网站有重大的变动,或者需要作什么声明的时候,我们就要用到弹出窗口,这时只要我们一进入这个页面,就会弹出一个窗口,其实要制作这样的弹出窗口真的非常的容易,只要在该页面的HTML代码里加入一段JavaScript 代码即可实现了。我们就来看看这最简单的弹出窗口:
把下面的这一段代码可以加入HTML文件的<head>和</head>之间或者<body>和</body>间就行的了,越在前面越早执行的哟!
<SCRIPT LANGUAGE="javascript">//*JAVASCRIPT脚本的开始标签,千万要记得啊
<!-- //*使不支持JAVASCRIPT的浏览器浏览时也不至于出错
window.open ('pop1.html') //*这就是关键,pop1.html就是你弹出窗口的内容
-->
</SCRIPT>
这里只需要注意这样一点就行的了:window.open ('pop1.html') 用于控制弹出窗口pop1.html,如果pop1.html 不与主窗口文件在同一路径下,你应该在前面指明路径,绝对路径(http://)和相对路径(../)都可以的。里面用单引号和双引号都可以,只是你千万别混用,一会用单引号,而一会用双引号。
上面我们实现的是最基本的弹出窗口,我们的起步,我们现在再来看一个稍微复杂点的弹出窗口,你只要对上面的代码作小小的改动就行的了!这样我们就能定制弹出窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况和文字的多少。
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('pop2.html', 'popwindow', 'height=200, width=320, top=0, left=24, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
//*上面的代码要写在一行上面''popwindow' 弹出窗口的标题名字;height=200 弹出窗口高度;width=320 弹出窗口宽度;top=0 弹出窗口距离屏幕上方的象素值;left=24 窗口距离屏幕左侧的象素值;toolbar=no 弹出窗口是否显示工具栏,yes为显示;menubar,scrollbars 控制弹出窗口的菜单栏和滚动栏的显示。resizable=no 是否允许改变弹出窗口大小,yes为允许;location=no 弹出窗口是否显示地址栏,yes为允许;status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
-->
</SCRIPT>
但是我们看到,这样的弹出窗口实在太简单的了,你基本上不能对他进行什么样的控制和设置,我们需要的是能满足我们的需要的弹出窗口(现代人是要求越来越高的了),那我们就用下面这个脚本来实现,你不但可以定制窗口大小,你还可以根据自己的需要改成你自己的说明的,这样的欢迎窗口一定让你的主页更酷。
将如下代码加入HTML代码的<HEAD>和</HEAD>之间:
<script language="JavaScript">
<!--
var gt = unescape('%3e');
var popup = null;
var over = "Launch Pop-up Navigator";
popup = window.open('', 'popupnav', 'width=200,height=170,resizable=1,scrollbars=auto');/*width和height是窗口的大小,你可以根据自己的需要进行调整,而resizable是控制窗口大小是否根据文字多少变化,值为0就固定了,为1可以变化,scrollbars是控制滚动条的)
if (popup != null) {
if (popup.opener == null) {
popup.opener = self;
}
popup.location.href = '说明窗口内容文件.html';/*popup.location.href = '用于说明窗口内容.htm',用于设置窗口中出现的内容的文件名。
}
// -->
</script>
有时为了需要我们可以同时弹出两个窗口,这实现难吗?其实也不难,如果你理解了上面的,那简直就易如反掌了,来看看吧,你只要对上面的代码稍微改动一下就可以的了:
<script LANGUAGE="JavaScript">
<!--
window.open ("pop1.html", "popwindow1", "height=100, width=120, top=0, left=24,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
window.open ("pop2.html", "popwindow2", "height=100, width=200, top=100, left=144,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//-->
</script>
在这里,我们为了避免弹出的2个窗口覆盖,用top 和left 控制一下弹出的位置不要相互覆盖就可以的了。
有了上面这些, 我想你要做出很酷很好的弹出窗口已经很容易的了,但是我们发现在你访问一个站点的时候, 如果经常出现弹出窗口(每刷新一次就出现),我们就会觉得很烦的,这里我们看看对弹出窗口的一些优化处理:
第一招,我们给弹出窗口加个“关闭窗口“按纽
只要加上这段代码就行的了:
<FORM>
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>
</FORM>
第二招:让弹出窗口自己定时关闭
首先,将如下代码加入pop1.html 文件的<head>和</head>之间:
<script language="JavaScript">
<!--
function closeit() {
setTimeout("self.close()",100000) //单位是毫秒,这里是100秒
</script>
然后,再用<body onload="closeit()"> 这一句话代替pop1.html 中原有的<BODY>这一句就可以了。这样100秒钟后弹出窗口就会自行关闭
第三招:控制你的弹出窗口只弹出一次(如果每进一次,刷新一次就弹出你不觉得很烦和麻烦吗?)有什么好的办法吗?
那是当然的啊,我们现在只要使用cookie 来控制就能实现这样的要求了。
首先,你需把将如下代码加入到页面HTML的<HEAD>和</HEAD>之间:
<script>
function openwin(){
window.open("pop1.html","","width=120,height=240")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){ //*控制弹出窗口的函数哟,你要使用他的啊
if (get_cookie('popped')==''){
openwin()
document.cookie="popped=yes"
}
}
//-->
</script> 然后,用<body onload="loadpopup()">替换页面中原来的<BODY>这一句就行的了。
这样你的弹出窗口就只弹出一次了,既使大家了解了你的信息,也不会觉得烦的。最后祝大家做出你满意的效果来,到时别忘记了叫我来看看啊!
分享到:
相关推荐
javascript DIV隐藏、显示 弹出式窗口样式
JAVASCRIPT弹出窗口代码JAVASCRIPT弹出窗口代码JAVASCRIPT弹出窗口代码
JAVASCRIPT弹出DIV层窗口实例
javascript 实现弹出小窗口javascript 实现弹出小窗口javascript 实现弹出小窗口javascript 实现弹出小窗口javascript 实现弹出小窗口javascript 实现弹出小窗口
JavaScript 模式窗口 弹出窗 DIV JavaScript 模式窗口 弹出窗 DIV ...JavaScript 模式窗口 弹出窗 DIVJavaScript 模式窗口 弹出窗 DIVJavaScript 模式窗口 弹出窗 DIVJavaScript 模式窗口 弹出窗 DIV
用JavaScript实现弹出窗口 用JavaScript实现弹出窗口 用JavaScript实现弹出窗口
怎么用javascript写一个阻止弹出式窗口的htm,这里有个网页大家可以好好的看看哦!
JavaScript 弹出半透明窗口 JavaScript 弹出半透明窗口 JavaScript 弹出半透明窗口 JavaScript 弹出半透明窗口 JavaScript 弹出半透明窗口
Javascript弹出多样窗口Javascript弹出多样窗口Javascript弹出多样窗口Javascript弹出多样窗口Javascript弹出多样窗口Javascript弹出多样窗口Javascript弹出多样窗口
JAVASCRIPT 所有关于弹出窗口的代码 开发过程中直接可以用 经过长时间的积累形成的,供大家分享!
JS 弹出窗口 javascriptJS
Tigra Calendar 是一个跨浏览器的 JavaScript 日历控件,以下拉弹出方式选择日期。
详细介绍javascript弹出窗口的设计方法,各个键值的含义,注意事项等。
主要介绍了JavaScript弹出新窗口并控制窗口移动到指定位置的方法,涉及javascript针对弹出窗口的操作技巧,非常具有实用价值,需要的朋友可以参考下
javascript弹出窗口lhgdialog 非常好用
Javascript,iframe的使用,框架,弹出新的窗口,警告框 window.open Javascript,iframe的使用,框架,弹出新的窗口,警告框 window.open Javascript,iframe的使用,框架,弹出新的窗口,警告框 window.open ...
JavaScript弹出式日历,选择相应的日期,会自动添入文本框中
制作Javascript弹出窗口技巧九则,需要注意的是,JS脚本中的的大小写最好前后保持一致。
javascript操作DIV总结(弹出窗口篇)只供参考,请多多指教
JavaScript 网页弹出各种形式的窗口