php js 点击文字超链接出现一个窗口点击关闭仍然在当页
php我做了一个显示标题的页面，想点击标题就出现一个窗口(就像好多网站上点击小图片出现一个大图片窗口)显示对应内容点击关闭窗口关闭，仍然在当页...
php 我做了一个显示标题的页面，想点击标题就出现一个窗口(就像好多网站上点击小图片出现一个大图片窗口)显示对应内容点击关闭窗口关闭，仍然在当页
展开
展开全部
<script type="text/javascript">
var docEle = function()
{
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id)
{
var m = "mask";
if (docEle(_id)) document.body.removeChild(docEle(_id));
if (docEle(m)) document.body.removeChild(docEle(m));
//新弹出层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDivWidth = 400;
newDivHeight = 200;
newDiv.style.width = newDivWidth + "px";
newDiv.style.height = newDivHeight + "px";
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
newDiv.style.background = "#EFEFEF";
newDiv.style.border = "1px solid #860001";
newDiv.style.padding = "5px";
newDiv.innerHTML ="<div> ~恭喜成功~</div>"; <!--此处放你要弹出的效果，加图片的话除去阴暗效果代码-->
document.body.appendChild(newDiv);
//弹出层滚动居中
function newDivCenter()
{
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
}
if(document.all)
{
window.attachEvent("onscroll",newDivCenter);
}
else
{
window.addEventListener('scroll',newDivCenter,false);
}
//关闭新图层和mask遮罩层
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "<input type='button' value='关闭'>";
newA.onclick = function()
{
if(document.all)
{
window.detachEvent("onscroll",newDivCenter);
}
else
{
window.removeEventListener('scroll',newDivCenter,false);
}
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
newDiv.appendChild(newA);
}
</script>
<body>
<a onClick="openNewDiv('newDiv');" style="cursor:pointer">老弹</a>
</body>
var docEle = function()
{
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id)
{
var m = "mask";
if (docEle(_id)) document.body.removeChild(docEle(_id));
if (docEle(m)) document.body.removeChild(docEle(m));
//新弹出层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDivWidth = 400;
newDivHeight = 200;
newDiv.style.width = newDivWidth + "px";
newDiv.style.height = newDivHeight + "px";
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
newDiv.style.background = "#EFEFEF";
newDiv.style.border = "1px solid #860001";
newDiv.style.padding = "5px";
newDiv.innerHTML ="<div> ~恭喜成功~</div>"; <!--此处放你要弹出的效果，加图片的话除去阴暗效果代码-->
document.body.appendChild(newDiv);
//弹出层滚动居中
function newDivCenter()
{
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
}
if(document.all)
{
window.attachEvent("onscroll",newDivCenter);
}
else
{
window.addEventListener('scroll',newDivCenter,false);
}
//关闭新图层和mask遮罩层
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "<input type='button' value='关闭'>";
newA.onclick = function()
{
if(document.all)
{
window.detachEvent("onscroll",newDivCenter);
}
else
{
window.removeEventListener('scroll',newDivCenter,false);
}
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
newDiv.appendChild(newA);
}
</script>
<body>
<a onClick="openNewDiv('newDiv');" style="cursor:pointer">老弹</a>
</body>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
http://www.jsres.com/weebox/demo/weebox.html
这个应该是你想要的。用起来方便，简单，操作容易，文件也小
它含有以下特性：
.支持多层弹窗
.支持单一弹窗，即同ID弹窗在打开第二次使用时，前一个将被自动关闭，参考boxid选项
.支持自定义样式，参考boxclass选项
.解决IE中SELECT的问题，使用了bgiframe功能
.支持拖动效果，通过draggable设置，参考draggable选项
.支持内容来源方式Ajax, Selector(jQuery的), Text(直接内容)
.支持多种弹窗类型,参考type选项
.支持自动关闭,参考timeout选项
.支持遮照效果(modal弹窗)，参考modal选项
.支持不同的显示位置，中间或者以某个元素为参照物，参考position选项
.支持弹窗打开前(onopen)、点确认(onok)、点取消(oncancel)、关闭窗口(onclose)等的回调函数
.支持打开后，重新设置标题(setTitle)、内容(setContent)、按钮等方法
.支持只在弹窗内查找元素的方法:find(selector)
.支持打开和关闭时的动画效果，参考animate、showAnimate,hideAnimate选项
Google code:http://code.google.com/p/weebox/
DEMO网址:http://www.jsres.com/weebox/demo/weebox.html
下载网址:http://www.jsres.com/weebox/download/weebox0.3.zip
这个应该是你想要的。用起来方便，简单，操作容易，文件也小
它含有以下特性：
.支持多层弹窗
.支持单一弹窗，即同ID弹窗在打开第二次使用时，前一个将被自动关闭，参考boxid选项
.支持自定义样式，参考boxclass选项
.解决IE中SELECT的问题，使用了bgiframe功能
.支持拖动效果，通过draggable设置，参考draggable选项
.支持内容来源方式Ajax, Selector(jQuery的), Text(直接内容)
.支持多种弹窗类型,参考type选项
.支持自动关闭,参考timeout选项
.支持遮照效果(modal弹窗)，参考modal选项
.支持不同的显示位置，中间或者以某个元素为参照物，参考position选项
.支持弹窗打开前(onopen)、点确认(onok)、点取消(oncancel)、关闭窗口(onclose)等的回调函数
.支持打开后，重新设置标题(setTitle)、内容(setContent)、按钮等方法
.支持只在弹窗内查找元素的方法:find(selector)
.支持打开和关闭时的动画效果，参考animate、showAnimate,hideAnimate选项
Google code:http://code.google.com/p/weebox/
DEMO网址:http://www.jsres.com/weebox/demo/weebox.html
下载网址:http://www.jsres.com/weebox/download/weebox0.3.zip
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
