JS弹出层/窗口源代码收集

lcywjvb
浏览: 61722 次
性别:
来自: 西安
最近访客更多访客>>

dongruan00
风卷残云
dimingchan
kfcman
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

博客分类：
V层
Safari CSS UP Microsoft HTML
JS弹出层/窗口源代码收集，很全的，很好用！

<!DOCTYPE html>
<html>
<head><title>JS弹出层</title>
<style>
body {margin:0px}
#Loading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background:#eeeeee;width:10px;height:10px}
</style>
<script LANGUAGE="JavaScript">
<!--
function $(){return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);}
var OverH,OverW,ChangeDesc,ChangeH=50,ChangeW=50;
function OpenDiv(_Dw,_Dh,_Desc) {
$("Loading").innerHTML="";
OverH=_Dh;OverW=_Dw;ChangeDesc=_Desc;
$("Loading").style.display='';
if(_Dw>_Dh){ChangeH=Math.ceil((_Dh-10)/((_Dw-10)/50))}else if(_Dw<_Dh){ChangeW=Math.ceil((_Dw-10)/((_Dh-10)/50))}
$("Loading").style.top=(document.documentElement.clientHeight-10)/2+"px";
$("Loading").style.left=(document.documentElement.clientWidth-10)/2+"px";
OpenNow()
}
var Nw=10,Nh=10;
function OpenNow() {
if (Nw>OverW-ChangeW)ChangeW=2;
if (Nh>OverH-ChangeH)ChangeH=2;
Nw=Nw+ChangeW;Nh=Nh+ChangeH;

if(OverW>Nw||OverH>Nh) {
if(OverW>Nw) {
$("Loading").style.width=Nw+"px";
$("Loading").style.left=(document.documentElement.clientWidth-Nw)/2+"px";
}
if(OverH>Nh) {
$("Loading").style.height=Nh+"px";
$("Loading").style.top=(document.documentElement.clientHeight-Nh)/2+"px"
}
window.setTimeout("OpenNow()",10)
}else{
Nw=10;Nh=10;ChangeH=50;ChangeW=50;
$("Loading").innerHTML=ChangeDesc;
}
}
//-->
</script>
</head>
<body>
<a href="javascript:OpenDiv(500,300,'层1<br>双击关闭')">层1 500*300</a><br><br>
<a href="javascript:OpenDiv(500,200,'层2<br>双击关闭')">层2 500*200</a><br><br>
<a href="javascript:OpenDiv(200,500,'层3<br>双击关闭')">层3 200*500</a><br><br>
<a href="javascript:OpenDiv(500,500,'层4<br>双击关闭')">层4 500*500</a>
<div id="Loading" style="display:none" ondblclick="this.style.display='none'"></div>
</body>
</html>

可以用鼠标拖动的JS弹出层

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>简单的测试页面</title>
  <style type="text/css">
  <!--
    html
    {
      height: 100%;
    }
    body
    {
      margin: 0px;
      padding: 0px;
      height: 100%;
    }
    #dt_3
    {
      cursor: pointer;
    }
    div#mbDIV
    {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: #AAAAAA;
      z-index: 10;
      filter: alpha(opacity=80);opacity:0.8;
    }
    div#loginDIV
    {
      position: absolute;
      width: 300px;
      height: 150px;
      background-color: #FFFF00;
      z-index: 20;
    }
    div#loginTopDIV
    {
      width: 100%;
      height: 20px;
      background-color: #FF0000;
      cursor: move;
    }
  -->
  </style>
  <script type="text/javascript">
  <!--
    function show(ele)
    {
      eval(ele + ".style.display = ''");
    }
    function hidden(ele)
    {
      eval(ele + ".style.display = 'none'");
    }
  //-->
  </script>
</head>

<body>
<div style="overflow: hidden;">
<h3>请点击 --> 03号拖拉机</h3>
<p id="dt_1">01号拖拉机</p>
<p id="dt_2">02号拖拉机</p>
<p id="dt_3">03号拖拉机</p>
<p id="dt_4">04号拖拉机</p>
<p id="dt_5">05号拖拉机</p>
<p id="dt_6">06号拖拉机</p>
<p id="dt_7">07号拖拉机</p>
<p id="dt_8">08号拖拉机</p>
<p id="dt_9">09号拖拉机</p>
<p id="dt_10">10号拖拉机</p>
<p id="dt_11">11号拖拉机</p>
</div>

<div id="mbDIV" style="display: none;"></div>
<div id="loginDIV" style="top: 200px;left: 300px;display: none;">
<div id="loginTopDIV">Move</div>
<p style="text-align: center;">登陆内容在这里哦</p>
<form action="#" method="get" style="text-align: center;">
<input type="button" value="确定" id="button_1" /> <input type="button" value="取消" id="button_2" />
</form>
</div>

<script type="text/javascript">
<!--
/**
* 这里是乱七八遭信息
* */
  for(var i=1;i<=11;i++)
  {
    eval("var dt_" + i + " = document.getElementById('dt_" + i + "')");
  }
  var mbDIV = document.getElementById("mbDIV");
  var loginDIV = document.getElementById("loginDIV");
  var loginTopDIV = document.getElementById("loginTopDIV");

  document.getElementById("button_1").onclick = function()
                                                {
                                                  hidden("loginDIV");
                                                  hidden("mbDIV");
                                                }
  document.getElementById("button_2").onclick = function()
                                                {
                                                  hidden("loginDIV");
                                                  hidden("mbDIV");
                                                }
  dt_3.onclick = function()
                 {
                   loginDIV.style.top = "200px";
                   loginDIV.style.left = "300px";
                   show("loginDIV");
                   show("mbDIV")
                 }

/**
*这里写的是拖动信息
* */
    loginTopDIV.onmousedown = Down;
    var tHeight,lWidth;
    function Down(e)
    {
        var event = window.event || e;
        tHeight = event.clientY  - parseInt(loginDIV.style.top.replace(/px/,""));
        lWidth  = event.clientX - parseInt(loginDIV.style.left.replace(/px/,""));
        document.onmousemove = Move;
        document.onmouseup   = Up;
    }
    function Move(e) {
        var event = window.event || e;
        var top = event.clientY - tHeight;
        var left = event.clientX - lWidth;
        //判断 top 和 left 是否超出边界
        top = top < 0 ? 0 : top;
        top = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top;
        left = left < 0 ? 0 : left;
        left = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left;
        loginDIV.style.top  = top + "px";
        loginDIV.style.left = left +"px";
    }
    function Up() {
        document.onmousemove = null;
    }
//-->
</script>
</body>
</html>

一直为JS弹出层的定位问题头疼，现在不用愁了，不同的弹出层可以用CSS来定位，不用在JS给每个弹出层都定同样的位置，具体代码如下：

演示地址：猛击这里

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS弹出层</title>
<script language="javascript">
function BOX_show(e)//显示
{
    if(document.getElementById(e)==null)
    {
        return ;
    }
    var selects = document.getElementsByTagName('select');
    for(i = 0; i < selects.length; i++)
    {
        selects[i].style.visibility = "hidden";
    } 

    BOX_layout(e);
    window.onresize = function(){BOX_layout(e);} //改变窗体重新调整位置
    window.onscroll = function(){BOX_layout(e);} //滚动窗体重新调整位置
    document.onkeyup = function(event)
    {
        var evt = window.event || event;
        var code = evt.keyCode?evt.keyCode : evt.which;
        //alert(code);

        if(code == 27)
        {
            BOX_remove(e);
        }
    }

}

function BOX_remove(e)//移除
{
    window.onscroll = null;
    window.onresize = null;
    document.getElementById('BOX_overlay').style.display="none";
    document.getElementById(e).style.display="none";

    var selects = document.getElementsByTagName('select');
    for(i = 0; i < selects.length; i++)
    {
        selects[i].style.visibility = "visible";
    }
}

function BOX_layout(e)//调整位置
{
    var a = document.getElementById(e);

    if (document.getElementById('BOX_overlay')==null)//判断是否新建遮掩层
    {

        var overlay = document.createElement("div");
        overlay.setAttribute('id','BOX_overlay');

        //overlay.onclick=function(){BOX_remove(e);};
        //a.parentNode.appendChild(overlay);
        document.body.appendChild(overlay);
    }

    document.getElementById('BOX_overlay').ondblclick=function(){BOX_remove(e);};
    //取客户端左上坐标，宽，高
    var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

    var clientWidth;
    if (window.innerWidth)
    {
        clientWidth = window.innerWidth;
       // clientWidth = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));
    }
    else
    {
        clientWidth = document.documentElement.clientWidth;
    }

    var clientHeight;
    if (window.innerHeight)
    {
        clientHeight = window.innerHeight;
        //clientHeight = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight));
    }
    else
    {
        clientHeight = document.documentElement.clientHeight;
    }

    var bo = document.getElementById('BOX_overlay');
    bo.style.left = scrollLeft+'px';
    bo.style.top = scrollTop+'px';
    bo.style.width = clientWidth+'px';
    bo.style.height = clientHeight+'px';
    bo.style.display="";
    //Popup窗口定位
    a.style.position = 'absolute';
    a.style.zIndex=999;
    a.style.display="";
    //a.style.left = scrollLeft+((clientWidth-a.offsetWidth)/2)+'px';
    //a.style.top = scrollTop+((clientHeight-a.offsetHeight)/2)+'px';
}

function HiddenButton(e)
{
    e.style.visibility='hidden';
    e.coolcodeviousSibling.style.visibility='visible'
}
</script>
<style type="text/css">

body{}

#BOX_overlay{position: absolute;z-index: 100;top: 0px;left: 0px;background-color:#ccc;filter: alpha(opacity=70);-moz-opacity: 0.7;opacity: 0.7;}

</style>
</head>

<body>
<p onClick="BOX_show('messdiv')"  style="cursor:pointer;">点我就出来</p>
<div id="messdiv" style="position:absolute; display:none; top:135px; left:350px; width:560px; padding:10px 20px 0; background:#f8e2a0;text-align:left; border:2px solid #5d3f0c;z-index:999; font-size:12px;">
        <p style="text-align:right; margin:0; padding:0; line-height:14px; float:right;"><a href="javascript:void(0)" title="关闭" style="line-height:14px;font-size:12px; color:#333;" onclick="BOX_remove('messdiv')" target="_self">关闭</a></p>
<br /><br /><br /><br />这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容<br /><br /><br /><br /><br /><br /><br /><br />
                   <div style="width:176px;padding:0 120px;overflow:hidden;margin:10px auto 20px;">
                <a title="关闭窗口" href="javascript:void(0)" onclick="BOX_remove('messdiv')" target="_self"  style=" background:#fff;float:left; width:70px;height:20px;padding:5px 0 0 10px;color:#feeba9;margin-right:10px;"><span style="color:#ffd014;">关闭窗口</span></a>

                <a title="收藏页面" href="javascript:void(0)" onClick="addbookmark()" target="_self" style=" background:#fff;float:left;width:70px;height:20px;padding:5px 0 0 10px;color:#feeba9;"><span style="color:#ffd014;">收藏页面</span></a>
            </div>
        <div style="clear:both;"></div>
</div>
<div id="BOX_overlay"></div>
<script type="text/javascript">
//添加收藏夹
function addbookmark()
{
    var nome_sito = "工作室";
       var url_sito = "http://www.seeseeyou.com/";
       if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt
           (navigator.appVersion) >= 4))
           window.external.AddFavorite(url_sito, nome_sito);
       else if (navigator.appName == "Netscape")
           window.sidebar.addPanel(nome_sito, url_sito, '');
       else
           alert("Sorry!Cann't Add this site to your favorite!.");}
</script>
</body>
</html>
分享到：
web.xml中spring+struts | 针对于lucene使用和优化
2011-05-30 10:37
浏览 1672
评论(0)
分类:Web前端
查看更多
发表评论

您还没有登录,请您登录后再发表评论
最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS弹出层/窗口源代码收集

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS弹出层/窗口源代码收集

评论

发表评论

相关推荐

关于struts2 舍弃form

org.apache.jasper.JasperException: jsp.error.beans.property.conversion

知道id或者name 替换内容 html

最近访客更多访客>>
