展开全部
如何制作网页的弹出窗口
发表日期:2004-7-29 23:46:19 来源:走进数码网 作者:怪鸭兽 阅读:次
--------------------------------------------------------------------------------
问:我在制作网页时,也想制作一个弹出窗口,请问该如何制作?
答:经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段代码即可实现。注意:有关涉及到代码的步骤,应该用记事本来做,不要在Dreamweaver下操作,否则,会有意想不到的麻烦。现针对弹出窗口举几个实例:
��1.最基本的弹出窗口代码
<SCRIPT LANGUAGE="javascript">
<!--
window.open("http://www.intodigi.net")
-->
</SCRIPT>
<!--和-->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。
window.open("http://www.intodigi.net")用于控制弹出新的窗口http://www.intodigi.net,如果http://www.intodigi.net不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以,只是不要混用。
这一段代码可以加入HTML的任意位置,<head>和</head>之间可以,<body>和</body>之间也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。
��2.加参数的弹出窗口代码
<SCRIPT LANGUAGE="javascript">
<!--
window.open("http://www.intodigi.net", "a", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
-->
</SCRIPT>
��"http://www.intodigi.net"表示页面的地址,可以是相对路径,也可以是绝对路径。
��"a"表示弹出窗口的名字(不是文件名),它的意义在于,当你刷新原始的这页全窗口的时候,弹出窗口就会刷新一次;而如果把名字省略,改为"",那么当刷新这页的时候,就会新增加一个弹出窗口。
��height=100表示弹出窗口的高度。
��width=400表示弹出窗口的宽度。
top=0表示窗口距离屏幕上方的象素值。
left=0表示窗口距离屏幕左侧的象素值。
toolbar=no表示是否显示工具栏,1或yes为显示。
menubar=no表示是否显示菜单栏,1或yes为显示。
scrollbars=no表示是否显示滚动栏,1或yes为显示。
resizable=no表示是否允许改变窗口大小,1或yes为允许。
location=no表示是否显示地址栏,1或yes为允许。
status=no表示是否显示状态栏内的信息(通常是文件已经打开),1或yes为允许。
��3.点击超链接的弹出窗口代码
��<a style="cursor:hand" onclick="window.open ("http://www.intodigi.net", "", "width=400,height=300")">走进数码网弹出窗口广告</a>
��3.批量实现的弹出窗口代码
��<script>function y(e){window.open(e,"","width=400,height=300")}</script>
��<a onclick=y("http://www.intodigi.net")>走进数码网</a>
��<a onclick=y("http://www.intodigi.com")>百年经典</a>
��4.函数控制的弹出窗口代码
<html>
<head>
<script LANGUAGE="JavaScript">
<!--
function openwin() {
window.open ("http://www.intodigi.net", "a", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
}
//-->
</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="打开窗口">。
5.同时弹出2个窗口的弹出窗口代码
<script LANGUAGE="JavaScript">
<!--
function openwin() {
window.open ("http://www.intodigi.net", "", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
window.open ("http://www.intodigi.com", "", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
}
//-->
</script>
为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
6.弹出主窗口同时弹出小窗口的弹出窗口代码
将以下代码加入<head>和</head>之间:
<script language="javascript">
<!--
function openwin() {
window.open("http://www.intodigi.net","","width=200,height=200")
}
//-->
</script>
将以下代码加入<body>和</body>之间:
<a href="http://www.intodigi.net/about.html" onclick="openwin()">open</a>
7.弹出窗口定时关闭控制的弹出窗口代码
将以下代码加入弹出的页面的<head>和</head>之间,让它10秒后自动关闭。
<script language="JavaScript">
function closeit() {
setTimeout("self.close()",10000) //毫秒
}
</script>
然后,再用<body onload="closeit()"> 这一句话代替弹出的页面中原有的<BODY>这一句就可以了。
8.弹出窗口中加上关闭按钮的弹出窗口代码
<FORM>
<INPUT TYPE="BUTTON" VALUE="关闭" onClick="window.close()">
</FORM>
9.内包含弹出窗口的弹出窗口代码
上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。通过下面的例子,你可以在一个页面内完成上面的效果。
<html>
<head>
<SCRIT LANGUAGE="JavaScript">
function openwin()
{
OpenWindow=window.open("http://www.intodigi.net", "", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
OpenWindow.document.write("<TITLE>例子</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
OpenWindow.document.write("<h1>Hello!</h1>")
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()
}
</SCRIPT>
</head>
<body>
<a href="#" onclick="openwin()">打开新窗口</a>
<input type="button" onclick="openwin()" value="打开窗口">
</body>
</html>
OpenWindow.document.write()里面的代码是标准的HTML,只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束。
10.单击鼠标右键自动弹出窗口的弹出窗口代码
将以下代码加入<head>和</head>之间:
<script language=JavaScript>
<!--
function click()
{
if (event.button==2)
{window.open("http://www.intodigi.net","popwindows","toolbar=no,menubar=no,width=200,height=200")
}
}
document.onmousedown=click
//-->
</script>
10.Cookie控制的弹出窗口代码
将以下代码加入弹出的页面的<head>和</head>之间:
<script>
function openwin(){
window.open("page.html","","width=200,height=200")
}
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()">(注意不是openwin而是loadpop)替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。
发表日期:2004-7-29 23:46:19 来源:走进数码网 作者:怪鸭兽 阅读:次
--------------------------------------------------------------------------------
问:我在制作网页时,也想制作一个弹出窗口,请问该如何制作?
答:经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段代码即可实现。注意:有关涉及到代码的步骤,应该用记事本来做,不要在Dreamweaver下操作,否则,会有意想不到的麻烦。现针对弹出窗口举几个实例:
��1.最基本的弹出窗口代码
<SCRIPT LANGUAGE="javascript">
<!--
window.open("http://www.intodigi.net")
-->
</SCRIPT>
<!--和-->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。
window.open("http://www.intodigi.net")用于控制弹出新的窗口http://www.intodigi.net,如果http://www.intodigi.net不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以,只是不要混用。
这一段代码可以加入HTML的任意位置,<head>和</head>之间可以,<body>和</body>之间也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。
��2.加参数的弹出窗口代码
<SCRIPT LANGUAGE="javascript">
<!--
window.open("http://www.intodigi.net", "a", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
-->
</SCRIPT>
��"http://www.intodigi.net"表示页面的地址,可以是相对路径,也可以是绝对路径。
��"a"表示弹出窗口的名字(不是文件名),它的意义在于,当你刷新原始的这页全窗口的时候,弹出窗口就会刷新一次;而如果把名字省略,改为"",那么当刷新这页的时候,就会新增加一个弹出窗口。
��height=100表示弹出窗口的高度。
��width=400表示弹出窗口的宽度。
top=0表示窗口距离屏幕上方的象素值。
left=0表示窗口距离屏幕左侧的象素值。
toolbar=no表示是否显示工具栏,1或yes为显示。
menubar=no表示是否显示菜单栏,1或yes为显示。
scrollbars=no表示是否显示滚动栏,1或yes为显示。
resizable=no表示是否允许改变窗口大小,1或yes为允许。
location=no表示是否显示地址栏,1或yes为允许。
status=no表示是否显示状态栏内的信息(通常是文件已经打开),1或yes为允许。
��3.点击超链接的弹出窗口代码
��<a style="cursor:hand" onclick="window.open ("http://www.intodigi.net", "", "width=400,height=300")">走进数码网弹出窗口广告</a>
��3.批量实现的弹出窗口代码
��<script>function y(e){window.open(e,"","width=400,height=300")}</script>
��<a onclick=y("http://www.intodigi.net")>走进数码网</a>
��<a onclick=y("http://www.intodigi.com")>百年经典</a>
��4.函数控制的弹出窗口代码
<html>
<head>
<script LANGUAGE="JavaScript">
<!--
function openwin() {
window.open ("http://www.intodigi.net", "a", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
}
//-->
</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="打开窗口">。
5.同时弹出2个窗口的弹出窗口代码
<script LANGUAGE="JavaScript">
<!--
function openwin() {
window.open ("http://www.intodigi.net", "", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
window.open ("http://www.intodigi.com", "", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
}
//-->
</script>
为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
6.弹出主窗口同时弹出小窗口的弹出窗口代码
将以下代码加入<head>和</head>之间:
<script language="javascript">
<!--
function openwin() {
window.open("http://www.intodigi.net","","width=200,height=200")
}
//-->
</script>
将以下代码加入<body>和</body>之间:
<a href="http://www.intodigi.net/about.html" onclick="openwin()">open</a>
7.弹出窗口定时关闭控制的弹出窗口代码
将以下代码加入弹出的页面的<head>和</head>之间,让它10秒后自动关闭。
<script language="JavaScript">
function closeit() {
setTimeout("self.close()",10000) //毫秒
}
</script>
然后,再用<body onload="closeit()"> 这一句话代替弹出的页面中原有的<BODY>这一句就可以了。
8.弹出窗口中加上关闭按钮的弹出窗口代码
<FORM>
<INPUT TYPE="BUTTON" VALUE="关闭" onClick="window.close()">
</FORM>
9.内包含弹出窗口的弹出窗口代码
上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。通过下面的例子,你可以在一个页面内完成上面的效果。
<html>
<head>
<SCRIT LANGUAGE="JavaScript">
function openwin()
{
OpenWindow=window.open("http://www.intodigi.net", "", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
OpenWindow.document.write("<TITLE>例子</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
OpenWindow.document.write("<h1>Hello!</h1>")
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()
}
</SCRIPT>
</head>
<body>
<a href="#" onclick="openwin()">打开新窗口</a>
<input type="button" onclick="openwin()" value="打开窗口">
</body>
</html>
OpenWindow.document.write()里面的代码是标准的HTML,只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束。
10.单击鼠标右键自动弹出窗口的弹出窗口代码
将以下代码加入<head>和</head>之间:
<script language=JavaScript>
<!--
function click()
{
if (event.button==2)
{window.open("http://www.intodigi.net","popwindows","toolbar=no,menubar=no,width=200,height=200")
}
}
document.onmousedown=click
//-->
</script>
10.Cookie控制的弹出窗口代码
将以下代码加入弹出的页面的<head>和</head>之间:
<script>
function openwin(){
window.open("page.html","","width=200,height=200")
}
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()">(注意不是openwin而是loadpop)替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询