点击图片弹出窗口代码（点击图片弹出窗口代码怎么关闭）

本篇文章给大家谈谈点击图片弹出窗口代码，以及点击图片弹出窗口代码怎么关闭对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、点击图片后弹出警告框 ，怎么写代码？
• 2、网页制作中的弹出窗口代码
• 3、js如何实现点击图片弹出窗口并放大这张图片,弹出的窗口有半透明遮罩层效果，弹出的窗口不跳页面？
• 4、关于弹出窗口代码和图片浏览模式代码
• 5、用DW作网页：点击一张图片就会弹出一独立窗口来显示它，这样的代码怎么写啊。。

点击图片后弹出警告框 ，怎么写代码？

图片的链接上加入onClick事件调用alert()消息函数就可以了，如下所示：

a href="#" onClick="alert('弹出警告框！！');"img src="image/**.jpg"/a

网页制作中的弹出窗口代码

一组常用的弹出窗口用法

以下代码集合常用的弹出窗口用法。

1、最基本的弹出窗口代码

SCRIPT LANGUAGE="javascript"

!--

window.open ('page.html')

--

/SCRIPT

代码放在SCRIPT LANGUAGE="javascript"标签和/script之间。

!-- 和 --是对一些版本低的浏览器起作用。

window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。

这一段代码可以加入HTML的任意位置，head和/head之间可以，body间/body也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。

2、经过设置后的弹出窗口

定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。

SCRIPT LANGUAGE="javascript"

!--

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')

//写成一行

--

/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"

!--

function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, 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="打开窗口"

js如何实现点击图片弹出窗口并放大这张图片,弹出的窗口有半透明遮罩层效果，弹出的窗口不跳页面？

通过JS代码  document.getElementById('divID').style.etElementById('divID').style.display = 'none'。函数可以实现。

1、遮罩层：div id="back"/div ，即作为背景层，覆盖整个页面。弹出层：div id="form"/div，即背景层上的一层，此层可根据#form{top: 10%; left: 10%;width: 20%;height: 30%;}，调整弹出层的弹出位置。

2、弹出层和遮罩层全部为div标签，可以利用display来控制显示和隐藏的属性，在js中，显示：   document.getElementById('divID').style.display = document.getElementById('divID').style.display = 'none'。

3、显示遮罩层和弹出层，即可用图中popDiv（）函数表示： 其中，showId 表示弹出层的divId, backId 表示遮罩层的divId；函数第去、2行显示弹出层和遮罩，3、4、5行设置遮罩层的长度、宽度。

4、关闭弹出层和遮罩层用hideDiv函数（）， 其中：showId 表示弹出层的divId, backId 表示遮罩层的divId；先关闭弹出层，后关闭遮罩层。

5、点击按钮后，弹出，要给按钮加上onclick函数，button onclick="popDiv('form','back')"点我，显示弹出层/button。

6、整体代码如下，css 样式可根据个人的喜好自行添加。

关于弹出窗口代码和图片浏览模式代码

调用：onclick="sAlert('1-1.jpg','xx','xxx',this);"

调用下面代码，可以修改html部分

script type="text/javascript" language="javascript"

function sAlert(txt,txt2,txt3,txt4){

var eSrc=(document.all)?window.event.srcElement:arguments[1];

var shield = document.createElement("DIV");

shield.id = "shield";

shield.style.position = "absolute";

shield.style.left = "0px";

shield.style.top = "0px";

shield.style.width = "100%";

shield.style.height = document.body.scrollHeight+"px";

shield.style.background = "#FDEEF4";

shield.style.textAlign = "center";

shield.style.zIndex = "10000";

shield.style.filter = "alpha(opacity=0)";

shield.style.opacity = 0;

var alertFram = document.createElement("DIV");

alertFram.id="alertFram";

alertFram.style.position = "absolute";

alertFram.style.left = "50%";

alertFram.style.top = "20%";

alertFram.style.marginLeft = "-225px" ;

alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";

alertFram.style.width = "450px";

alertFram.style.height = "150px";

alertFram.style.background = "#FDEEF4";

alertFram.style.textAlign = "center";

alertFram.style.lineHeight = "150px";

alertFram.style.zIndex = "10001";

strHtml = "ul style=\"list-style:none;margin:0px;padding:0px;line-height=20px;width:100%\"\n";

strHtml += " li style=\"background:#FDEEF4;text-align:left;padding-left:20px;padding-top:10px;font-size:14px;height:25px;line-height:25px;border:1px solid #efbc72;\"div align=leftstrong"+txt2+"/strong^^/divdiv align=rightstronga href=\"#\" onclick=\"doOk()\"关闭/a /strong/div/li\n";

strHtml += " li style=\"background:#FDEEF4;border-left:1px solid #F9CADE;border-right:1px solid #efbc72;\"img src="+txt+" /br"+txt3+"br"+txt4+"/li\n";

strHtml += " li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"a href=\"#\" onclick=\"doOk()\"关闭/a/li\n";

strHtml += "/ul\n";

alertFram.innerHTML = strHtml;

document.body.appendChild(alertFram);

document.body.appendChild(shield);

this.setOpacity = function(obj,opacity){

if(opacity=1)opacity=opacity/100;

try{ obj.style.opacity=opacity; }catch(e){}

try{

if(obj.filters.length0obj.filters("alpha")){

obj.filters("alpha").opacity=opacity*100;

}else{

obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";

}

}catch(e){}

}

var c = 0;

this.doAlpha = function(){

if (++c 20){clearInterval(ad);return 0;}

setOpacity(shield,c);

}

var ad = setInterval("doAlpha()",1);

this.doOk = function(){

//alertFram.style.display = "none";

//shield.style.display = "none";

document.body.removeChild(alertFram);

document.body.removeChild(shield);

eSrc.focus();

document.body.onselectstart = function(){return true;}

document.body.oncontextmenu = function(){return true;}

}

document.getElementById("do_OK").focus();

eSrc.blur();

document.body.onselectstart = function(){return false;}

document.body.oncontextmenu = function(){return false;}

}

/script

用DW作网页：点击一张图片就会弹出一独立窗口来显示它，这样的代码怎么写啊。。

a href="javascript:void(null);" style="CURSOR: hand" onclick="javascript:window.open('../tcy/lxdh.html','','left=200,top=100,height=500,width=600,status=no,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no,')"img src="../images/logo/tel.gif" width="165" height="165" border="0"/a

其中 left=200 是弹出的窗口距离 屏幕左侧的边距,后面的以次类推;height=500 是弹出页的高度;status=no 是不显示页面状态栏的信息,等与yes 是显示.

关于点击图片弹出窗口代码和点击图片弹出窗口代码怎么关闭的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。