javascript弹出窗和悬浮层的写法

 今天在写程序时要用弹出层,就复习和搜索了一下javascript弹出窗和悬浮层的写法,在网上找了代码然后修改了一下。把代码贴出来以后用得着:

<script type="text/javascript">

function $ () {
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id,DivHtml,newDivWidth,newDivHeight)
{
var m = "mask";
if ($(_id)) document.body.removeChild($(_id));
if ($(m)) document.body.removeChild($(m));
//mask遮罩层
var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
_scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
_scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
newMask.style.width = _scrollWidth + "px";
newMask.style.height = _scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#33393C";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask);
//新弹出层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDivWidth = newDivWidth||500;
newDivHeight = newDivHeight||250;
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 = DivHtml;
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 = "关闭";
newA.onclick = function()
{
if(document.all)
{
window.detachEvent("onscroll",newDivCenter);
}
else
{
window.removeEventListener(‘scroll’,newDivCenter,false);
}
document.body.removeChild($(_id));
document.body.removeChild($(m));
return false;
}
newDiv.appendChild(newA);
}
</script>

时间: 2024-11-02 23:36:33

javascript弹出窗和悬浮层的写法的相关文章

javascript实现一个简单的弹出窗_javascript技巧

功能介绍:点击一个按钮,然后页面会弹出一个窗口,而页面原来的内容会保持不变,只是在其页面上加了一个遮罩层,设置了不透明度,弹出的窗口可设置在固定位置,也可以自由设定,常见于网站的登录按钮. html页面: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

jQuery Mobile弹出窗、弹出层知识汇总_jquery

先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" data-overlay-theme="b" data-position-to="window" data-dismissible="false"> <a href='javascript:void(0)' data-rel="ba

javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

  本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法.分享给大家供大家参考.具体分析如下: 这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ登录的效果,就和这个很类似,代码段基于JavaScript,根据你的情况使用,有时候是用CSS完成的这种功能. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

javascript弹出层输入框

 这篇文章主要介绍了javascript弹出层输入框(示例代码).需要的朋友可以过来参考下,希望对大家有所帮助 如下所示: 代码如下:    <script language="javascript" type="text/javascript">          function alertWin(title, msg, w, h) {                var titleheight = "22px"; // 窗口标

如何创建一个JavaScript弹出DIV窗口层的效果_javascript技巧

在本教程中,我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果. 创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一.传统的JavaScript弹窗已经不适合目前网站的设计理念了,理由有二:首先,不友好--生硬的弹出对话框且伴随着"哐"的一声对用户体验是个很大的挑战:其次,兼容性不够强--有相当多的浏览器屏蔽了这种JS的Alert()方法.于是,一个良好用户体验的网站需要一种更合理的解决方案--使用很少的HTML代码,很少的

javascript弹出层点击任何地方关闭方法

 代码如下 复制代码 <!DOCTYPE html><html><head><meta charset="utf-8" /><title>点击其它地方关闭DIV</title></head> <body><input type="text" value="" id="tf"/><div style="wi

Javascript 弹出层居中效果

 代码如下 复制代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   <head>   <meta http-equiv="content-type" content="text/html; charset=utf-8">   <title>Javascript 弹出层居中</titl

JavaScript弹出窗口方法汇总_javascript技巧

本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点"确定"才会刷新. 而有的页面不会提示,不弹出提示窗口,直接就刷新了. 如果页面没有form, 则不会弹出提示窗口 如果页面有form表单, a)<form  method="post" ...>     会弹出提示窗口 b)<form  method=&quo

网页设计:javascript弹出窗口问题总结

javascript|弹出窗口|设计|网页|网页设计|问题 作者:罗代均,ldj_work#126.com ,转载请保持完整性. 1.无提示刷新网页     大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点"确定"才会刷新.而有的页面不会提示,不弹出提示窗口,直接就刷新了.如果页面没有form,则不会弹出提示窗口如果页面有form表单,       a)<form  method="post" ...>             会弹出提示窗口