jsp Poup弹出框

作者&投稿:苍临 (若有异议请与网页底部的电邮联系)
JS代码注释`(div 层遮罩/弹出框)~

有很多方法可以实现,基本原理是一样的。你的实现方法是这样的:遮罩部分2个层和登录的层一开始设置的属性为display:none,这是不可见的,点击那个超链接后,开始运行js代码,登录层的内容被复制到了遮罩部分的第二个层里面成为了新的登录层,并设置这个层为最上面,遮罩部分的第一个层设置在新登录层的下面,并设置成充满整个浏览器,背景黑色,透明度为30%,这样你看上去就是半透明的了,并且很大。原来的超链接层再最下面。因为半透明的层在原来超链接层的上面并且很大,所以用鼠标点击的时候只是点击在了半透明的层上面,并没有点击到超链接层上面。
js注释:
////下面 设置了一个空链接
location.href="#";
//下面2行是赋值
width = div_width;
height = div_height
//下面 得到登录层也就是id为popLayer的层的内容
var windowstr= document.getElementById("popLayer").innerHTML;
//下面 把登录层内容放到infoDiv层里,形成新的登陆层
document.getElementById("infoDiv").innerHTML=windowstr;
//下面2行设置新登录层的位置
document.getElementById("infoDiv").style.left=((document.body.clientWidth-width)>0?(document.body.clientWidth-width):0)/2+"px";
document.getElementById("infoDiv").style.top=200+"px";
//下面设置新登录层的zIndex值,这个值越大显示的时候就越在上面
document.getElementById("infoDiv").style.zIndex=10001;
//下面2行设置新登录层的宽和高
document.getElementById("infoDiv").style.width=width;
document.getElementById("infoDiv").style.height=height;
//设置新登录层边框
document.getElementById("infoDiv").style.border="3px solid #0099ff";

//tranDiv层里面包含了2个层 一个是半透明的遮罩层tranDiv,另一个是新的登录层infoDiv。可以把它看做一个容器。下面2行设置它的高和宽为网页内容可视区域的高度和宽度,这样这个层就充满整个浏览器了
document.getElementById("tranDiv").style.height=document.body.clientHeight+ "px";
document.getElementById("tranDiv").style.width=document.body.clientWidth+ "px";
//下面 设置这个容器层为可见
document.getElementById("tranDiv").style.display="";
//tranDiv就是那个半透明的遮罩层,现在也设置为可见
document.getElementById("tranDivBack").style.display="";
//下面 设置zindex值为10000,这个值比新登录层少1,表明在新登录层的下面
//document.getElementById("tranDivBack").style.zIndex=10000;
//下面 设置新登录成为可见
//document.getElementById("infoDiv").style.display="";



下面这个就是容器层,它的左上角位于浏览器的0,0位置就是浏览器的左上角,高度宽度在js里设置

下面这个是遮罩层 它位于容器层的0,0位置,宽度和高度都是100%,就是他的大小和位置和容器层一样,都是整个网页那么大。下面的filter用的是滤镜,他设置的是半透明,Opacity=30 半透明度30%,#000000是黑色,这样看起来就是黑色半透明的一个大层了

下面是新的登陆层,位置和高度在这里写了,但是运行js的时候会对其进行重新设置


点删除 就删除啊· 不懂我给你写·

其实代码非常简单:

<SCRIPT LANGUAGE=javascript>
<!--
window.open ('page.html')
-->
</SCRIPT>
因为这是一段javascript代码,所以它们应该放在<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=注意:使用的“ 方法四:用一个按钮调用:
<input type=button onclick=openwin() value=打开窗口>
【4、同时弹出2个窗口】
对源代码稍微改动一下:
<script LANGUAGE=javascript>
<!--
function openwin() {
window.open (page.html, newwindow, height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no)
//写成一行
window.open (page2.html, newwindow2, height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no)
//写成一行
}
//-->
</script>

为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。OK?

【5、主窗口打开文件1.htm,同时弹出小窗口page.html】

如下代码加入主窗口<head>区:
<script language=javascript>
<!--
function openwin() {
window.open(page.html,,width=200,height=200)
}
//-->
</script>
加入<body>区:
<a href=1.htm onclick=openwin()>open</a>即可。
【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秒钟后就自行关闭该窗口。)

【7、在弹出窗口中加上一个关闭按钮】
<FORM>
<INPUT TYPE='BUTTON' value='关闭' onClick='window.close()'>
</FORM>
呵呵,现在更加完美了!

【8、内包含的弹出窗口-一个页面两个窗口】

上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。
通过下面的例子,你可以在一个页面内完成上面的效果。
<html>
<head>
<SCRIPT LANGUAGE=javascript>
function openwin()
{
OpenWindow=window.open(, newwin, height=250, width=250,toolbar=no,scrollbars=+scroll+,menubar=no);
//写成一行
OpenWindow.document.write(<TITLE>例子</TITLE>)
OpenWindow.document.write(<BODY BGCOLOR=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=<input type=button onclick=openwin() value=打开窗口>
</body>
</html>
看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。

【9、终极应用--弹出的窗口之Cookie控制】
回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(
有解决的办法吗?Yes! ;-) Follow me.
我们使用cookie来控制一下就可以了。
首先,将如下代码加入主页面HTML的<HEAD>区:
<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=unescape(documents.cookie.substring(offset, end))
}
}
return returnvalue;
}

function loadpopup(){
if (get_cookie('popped')==''){
openwin()
documents.cookie=popped=yes
}
}

</script>
然后,用<body onload=loadpopup()>(注意不是openwin而是loadpop啊!)替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了


南阳市13421418779: 在jsp中怎么弹出一个提示框 -
错固卫可: 那你在html怎么弹出的?不就是加个script嘛.<br><body><br><script>alert("haha")<&#47;script><br><script>if(confirm("确定吗")){<br>alert("已删除")<br>}<&#47;script><br></body>

南阳市13421418779: 在JSP页面中 怎样实现点击按钮弹出选择框.能给出代码吗?? -
错固卫可: jsp中点击按钮弹出框,常见的有window.open和window.showModalDialog()两种方法.window.open基本语法:window.open(pageURL,name,parameters) 其中:pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数...

南阳市13421418779: jsp如何跳出一个对话框?谢谢!!! -
错固卫可: 这是在servlet中写的!HttpSession session = request.getSession(); if(session==null){ session = request.getSession(flase); session.setAttribute("key",value); response.sendRedirect("user.jsp"); } 下面是在现实页面写的内容:

南阳市13421418779: jsp进入下一个界面就弹出提示框,不点击按钮就弹出.(最简单代码) -
错固卫可: 在要进入的JSP页面中调用js

南阳市13421418779: jsp中怎样在返回原来页面后就即刻弹出对话框 -
错固卫可: jsp中加载页面时弹出对话框的方式是通过js来实现的,执行js方法要写在onload方法里面. <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, ...

南阳市13421418779: jsp加载后,弹出提示框 -
错固卫可: 提供思路及简单代码<br><br>window.successImgtotal=0; //js变量用来统计成功显示图片的个数<br>在你那些图片上 加入 onload="imgadd()"<br>function imgadd(){<br>window.successImgtotal++<br>if(successImgtotal=="你预计的全部显示的总数"){<br>alert(.......)<br>}<br>}

南阳市13421418779: jsp页面右下角弹出提示框 -
错固卫可:JavaScript提示框

南阳市13421418779: jsp 弹出提示窗口 -
错固卫可: <script> function tosubmit(){ if(confirm("确定要删除")){ <% response.sendRedirect("MyJsp.jsp"); }%> } }</script> 你试试吧,我们很久都不直接跳到jsp了,这个思想是没有问题的

南阳市13421418779: 想在jsp页面显示一个弹框要在action里怎么写 -
错固卫可: 直接输出javascript代码即可

南阳市13421418779: jsp当中这个黑线框是怎么实现的 -
错固卫可: jsp中可以嵌入通用的js写的弹出框提示,只要根据不同场景传不同参数就可以了. 参考代码如下: 弹出窗口(可拖动,背景灰色透明)

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网