jsp页面中怎么套入弹框？并且弹框是通用的
jsp页面中怎么套入弹框，并且弹框是通用的我现在是想把弹框做成通用的然后用到的时候引用一下就行可是在jsp中怎么弄成通用的是什么标签并且引用的时候用什么标签...
jsp页面中怎么套入弹框，并且弹框是通用的
我现在是想把弹框做成通用的 然后用到的时候引用一下就行
可是在jsp中怎么弄成通用的 是什么标签 并且引用的时候用什么标签 展开
我现在是想把弹框做成通用的 然后用到的时候引用一下就行
可是在jsp中怎么弄成通用的 是什么标签 并且引用的时候用什么标签 展开
2015-12-13 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
jsp中可以嵌入通用的js写的弹出框提示，只要根据不同场景传不同参数就可以了。
参考代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出窗口(可拖动，背景灰色透明)</title>
<script type="text/javascript">
<!--
/*FileName:AlertMsg.js
title:提示标题
content:提示的内容*/
document.write("<style type=\"text/css\">*{padding:0; margin:0}.close{float:right;cursor:default}</style>")
function $(id){ return document.getElementById(id)}
function AlertMsg(title,content){
var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;
con = "<form><table style='margin:10px 15px 15px 15px; border:0;'><tr><th style='border:0; line-height:22px; padding:3px 0; vertical-align:top;font-weight:bold;'>分类：</th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;'><input type='text' name='typename' size='20'/></td></tr><tr><th></th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;'><button style='line-height:normal;' type='submit' onclick='return submitform()'>确定</button> <button style='line-height:normal;' type='reset'>取消</button></td></tr></table></form>";
//弹出窗口设置
msgw = 300; //窗口宽度
msgh = 150; //窗口高度
msgbg = "#FFF"; //内容背景
msgcolor = "#000"; //内容颜色
bordercolor = "#000"; //边框颜色
titlecolor = "#FFF"; //标题颜色
titlebg = "#369"; //标题背景
//遮罩背景设置
var sWidth,sHeight;
sWidth = screen.availWidth;
sHeight = document.body.scrollHeight;
//创建遮罩背景
var maskObj = document.createElement("div");
maskObj.setAttribute('id','maskdiv');
maskObj.style.position = "absolute";
maskObj.style.top = "0";
maskObj.style.left = "0";
maskObj.style.background = "#777";
maskObj.style.filter = "Alpha(opacity=30);";
maskObj.style.opacity = "0.3";
maskObj.style.width = sWidth + "px";
maskObj.style.height = sHeight + "px";
maskObj.style.zIndex = "10000";
document.body.appendChild(maskObj);
//创建弹出窗口
var msgObj = document.createElement("div")
msgObj.setAttribute("id","msgdiv");
msgObj.style.position ="absolute";
msgObj.style.top = (screen.availHeight - msgh) / 4 + "px";
msgObj.style.left = (screen.availWidth - msgw) / 2 + "px";
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.fontSize = "12px";
msgObj.style.background = msgbg;
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.zIndex = "10001";
//创建标题
var thObj = document.createElement("div");
thObj.setAttribute("id","msgth");
thObj.className = "DragAble";
thObj.style.cursor = "move";
thObj.style.padding = "4px 6px";
thObj.style.color = titlecolor;
thObj.style.background = titlebg;
var titleStr = "<a class='close' title='关闭' style='cursor:pointer' onclick='CloseMsg()'>关闭</a>"+"<span>"+ title +"</span>";
thObj.innerHTML = titleStr;
//创建内容
var bodyObj = document.createElement("div");
bodyObj.setAttribute("id","msgbody");
bodyObj.style.padding = "10px";
bodyObj.style.lineHeight = "1.5em";
bodyObj.innerHTML = con;
var txt = document.createTextNode(content)
bodyObj.appendChild(txt);
//生成窗口
document.body.appendChild(msgObj);
$("msgdiv").appendChild(thObj);
$("msgdiv").appendChild(bodyObj);
}
function CloseMsg(){
//移除对象
document.body.removeChild($("maskdiv"));
$("msgdiv").removeChild($("msgth"));
$("msgdiv").removeChild($("msgbody"));
document.body.removeChild($("msgdiv"));
}
//拖动窗口
var ie = document.all;
var nn6 = document.getElementById&&!document.all;
var isdrag = false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "DragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="DragAble") {
isdrag = true;
oDragObj = oDragHandle.parentNode;
nTY = parseInt(oDragObj.style.top);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove = moveMouse;
return false;
}
}
document.onmousedown = initDrag;
document.onmouseup = new Function("isdrag=false");
//-->
</script>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr >
<td height="100" align="center" >
<p><a href="javascript:AlertMsg("温馨提示",'')">点我试试!</a></p>
</td>
</tr>
</table>
</div>
</body>
</html>
运行效果：
参考代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出窗口(可拖动，背景灰色透明)</title>
<script type="text/javascript">
<!--
/*FileName:AlertMsg.js
title:提示标题
content:提示的内容*/
document.write("<style type=\"text/css\">*{padding:0; margin:0}.close{float:right;cursor:default}</style>")
function $(id){ return document.getElementById(id)}
function AlertMsg(title,content){
var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;
con = "<form><table style='margin:10px 15px 15px 15px; border:0;'><tr><th style='border:0; line-height:22px; padding:3px 0; vertical-align:top;font-weight:bold;'>分类：</th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;'><input type='text' name='typename' size='20'/></td></tr><tr><th></th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;'><button style='line-height:normal;' type='submit' onclick='return submitform()'>确定</button> <button style='line-height:normal;' type='reset'>取消</button></td></tr></table></form>";
//弹出窗口设置
msgw = 300; //窗口宽度
msgh = 150; //窗口高度
msgbg = "#FFF"; //内容背景
msgcolor = "#000"; //内容颜色
bordercolor = "#000"; //边框颜色
titlecolor = "#FFF"; //标题颜色
titlebg = "#369"; //标题背景
//遮罩背景设置
var sWidth,sHeight;
sWidth = screen.availWidth;
sHeight = document.body.scrollHeight;
//创建遮罩背景
var maskObj = document.createElement("div");
maskObj.setAttribute('id','maskdiv');
maskObj.style.position = "absolute";
maskObj.style.top = "0";
maskObj.style.left = "0";
maskObj.style.background = "#777";
maskObj.style.filter = "Alpha(opacity=30);";
maskObj.style.opacity = "0.3";
maskObj.style.width = sWidth + "px";
maskObj.style.height = sHeight + "px";
maskObj.style.zIndex = "10000";
document.body.appendChild(maskObj);
//创建弹出窗口
var msgObj = document.createElement("div")
msgObj.setAttribute("id","msgdiv");
msgObj.style.position ="absolute";
msgObj.style.top = (screen.availHeight - msgh) / 4 + "px";
msgObj.style.left = (screen.availWidth - msgw) / 2 + "px";
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.fontSize = "12px";
msgObj.style.background = msgbg;
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.zIndex = "10001";
//创建标题
var thObj = document.createElement("div");
thObj.setAttribute("id","msgth");
thObj.className = "DragAble";
thObj.style.cursor = "move";
thObj.style.padding = "4px 6px";
thObj.style.color = titlecolor;
thObj.style.background = titlebg;
var titleStr = "<a class='close' title='关闭' style='cursor:pointer' onclick='CloseMsg()'>关闭</a>"+"<span>"+ title +"</span>";
thObj.innerHTML = titleStr;
//创建内容
var bodyObj = document.createElement("div");
bodyObj.setAttribute("id","msgbody");
bodyObj.style.padding = "10px";
bodyObj.style.lineHeight = "1.5em";
bodyObj.innerHTML = con;
var txt = document.createTextNode(content)
bodyObj.appendChild(txt);
//生成窗口
document.body.appendChild(msgObj);
$("msgdiv").appendChild(thObj);
$("msgdiv").appendChild(bodyObj);
}
function CloseMsg(){
//移除对象
document.body.removeChild($("maskdiv"));
$("msgdiv").removeChild($("msgth"));
$("msgdiv").removeChild($("msgbody"));
document.body.removeChild($("msgdiv"));
}
//拖动窗口
var ie = document.all;
var nn6 = document.getElementById&&!document.all;
var isdrag = false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "DragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="DragAble") {
isdrag = true;
oDragObj = oDragHandle.parentNode;
nTY = parseInt(oDragObj.style.top);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove = moveMouse;
return false;
}
}
document.onmousedown = initDrag;
document.onmouseup = new Function("isdrag=false");
//-->
</script>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr >
<td height="100" align="center" >
<p><a href="javascript:AlertMsg("温馨提示",'')">点我试试!</a></p>
</td>
</tr>
</table>
</div>
</body>
</html>
运行效果：
本回答由电脑网络分类达人 系统推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
：”jsp页面中怎么套入弹框，并且弹框是通用的”没理解是什么意思
jsp中可以自定义标签，然后可以自定义处理类，你可以看看jsp自定义标签的知识可能对你有所帮助，前端js框架中都有弹框的插件的，如jquery的dialog
jsp中可以自定义标签，然后可以自定义处理类，你可以看看jsp自定义标签的知识可能对你有所帮助，前端js框架中都有弹框的插件的，如jquery的dialog
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在页面AddName.jsp里要调用对话框，写一个JSP页面NewBox.jsp（用做对话框），然后在页面AddName.jsp里加上一段js代码：
/*用来打开对话框页面*/
function openwindow(){
window.open ("NewBox.jsp","Sample","fullscreen=no,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no, copyhistory=no,width=350,height=140,left=200,top=300");
}
/*在NewBox.jsp里调用这个函数，用来刷新AddName.jsp*/
function opensub(){
document.form1.submit();
}
在这里要对window.open里的参数做一下说明：
fullscreen=no 窗口模式，yes为全屏模式
toolbar=no, 显示工具条
location=no,显示网址栏
directories=no,导航条
status=no,状态条
menubar=no,菜单
scrollbars=no,滚动条
resizable=no,是否可以改变大小
copyhistory=no,历史按钮
width=350,宽
height=140'高
left=200,距离左边200
top=300,距离顶端300
这时要在NewBox.jsp里加上一部分js代码，下面是NewBox.jsp的代码
<html>
<head >
<title>新建邮件夹输入框</title>
<SCRIPT>
<!--
function bconfirm(){
opener.document.all['inboxname'].value=document.form1.inboxname.value;
opener.opensub();
window.close();
}
function bcancel(){
window.close();
}
-->
</SCRIPT>
</head>
<body bgcolor=#66CD00>
<FONT size=5>请输入新邮件夹的名称：</FONT>
<FORM method=post name=form1 action="">
<INPUT type=text name=inboxname size=35><p>
<INPUT type=button name=inputboxbt value=确定 onclick="bconfirm();">
<INPUT type=button name=inputboxbs value=取消 onclick="bcancel();">
</FORM>
</body>
</html>
你试试看。这种弹窗有好几种实现方式呢。
/*用来打开对话框页面*/
function openwindow(){
window.open ("NewBox.jsp","Sample","fullscreen=no,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no, copyhistory=no,width=350,height=140,left=200,top=300");
}
/*在NewBox.jsp里调用这个函数，用来刷新AddName.jsp*/
function opensub(){
document.form1.submit();
}
在这里要对window.open里的参数做一下说明：
fullscreen=no 窗口模式，yes为全屏模式
toolbar=no, 显示工具条
location=no,显示网址栏
directories=no,导航条
status=no,状态条
menubar=no,菜单
scrollbars=no,滚动条
resizable=no,是否可以改变大小
copyhistory=no,历史按钮
width=350,宽
height=140'高
left=200,距离左边200
top=300,距离顶端300
这时要在NewBox.jsp里加上一部分js代码，下面是NewBox.jsp的代码
<html>
<head >
<title>新建邮件夹输入框</title>
<SCRIPT>
<!--
function bconfirm(){
opener.document.all['inboxname'].value=document.form1.inboxname.value;
opener.opensub();
window.close();
}
function bcancel(){
window.close();
}
-->
</SCRIPT>
</head>
<body bgcolor=#66CD00>
<FONT size=5>请输入新邮件夹的名称：</FONT>
<FORM method=post name=form1 action="">
<INPUT type=text name=inboxname size=35><p>
<INPUT type=button name=inputboxbt value=确定 onclick="bconfirm();">
<INPUT type=button name=inputboxbs value=取消 onclick="bcancel();">
</FORM>
</body>
</html>
你试试看。这种弹窗有好几种实现方式呢。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
百度一下呗！很多都哟现成的代码的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
