用 js和css彈出層

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>factly彈出層</title>
<style type="text/css">
<!--

.tittleup {
font-size:14px;
font-weight:bold;
color:#000066;
padding-left:25px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #d0daec;
margin-bottom: 10px;
padding-bottom: 10px;
}
.od {
float:right;
font-size:14px;
color: #CC0000;
text-decoration: none;
}
.od:hover {
color:#FF0000;
}
.fd {
background:#EDF1F8;
border: 2px solid #849BCA;
margin-top:2px;
margin-left:2px;
float:left;
overflow:hidden;
position:absolute;
left:200px;
top:30px;
z-index: 10;
}
.contentup {
padding:20px;
}
}
-->
</style>
</head>
<body >
<div> <a href="#" onclick = "show('fd',650,300);return false;"> [開啟層] </a> </div>
<label>
<select name="select">
    <option>哈哈</option>
    <option>哈哈哈哈</option>
    <option>哈哈哈哈哈哈</option>
    <option>哈哈哈哈哈哈哈哈</option>
    <option>哈哈</option>
    <option>哈哈哈哈</option>
    <option>哈哈哈哈哈哈</option>
    <option>哈哈哈哈哈哈哈哈</option>
    <option>哈哈</option>
    <option>哈哈哈哈</option>
    <option>哈哈哈哈哈哈</option>
    <option>哈哈哈哈哈哈哈哈</option>
</select>
</label>
aaaaaa
aaaaa
aaaaa
aaaa
aaaa
aaaaaa
<input name="" type="text">

關閉 </a>
    <div id="tittleup" class="tittleup">factly哈哈</div>
kwg kwg
   <label>
<input type="checkbox" name="checkbox" value="checkbox">
</label>
<input name="" type="text">
<input name="" type="text">
<input name="" type="text">
<label>aaa
<select name="select">
    <option>哈哈</option>
    <option>哈哈哈哈</option>
    <option>哈哈哈哈哈哈</option>
    <option>哈哈哈哈哈哈哈哈</option>
    <option>哈哈</option>
    <option>哈哈哈哈</option>
    <option>哈哈哈哈哈哈</option>
    <option>哈哈哈哈哈哈哈哈</option>
    <option>哈哈</option>
    <option>哈哈哈哈</option>
    <option>哈哈哈哈哈哈</option>
    <option>哈哈哈哈哈哈哈哈</option>
</select>
</label>
</div>
</div>
<script type="text/javascript">
    var prox;
var proy;
var proxc;
var proyc;
var isIe=(document.all)?true:false;

function setSelectState(state)
{
    var objl=document.getElementsByTagName('select');
    for(var i=0;i<objl.length;i++)
    {
        objl[i].style.visibility=state;
    }
}

//關閉視窗
function closeWindow()
{
    if(document.getElementById('back')!=null)
    {
        document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
    }
    if(document.getElementById('mesWindow')!=null)
    {
        document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
    }
    if(isIe)
    {
        setSelectState('');
    }
}
/*--開啟Div--*/
/*參數說明：id是div的ID、divWidth是彈出層的寬度、divHeight是彈出層的高度*/
function show(id,divWidth,divHeight)
{
    closeWindow();
    var bWidth = parseInt(document.body.scrollWidth);
    var bHeight=parseInt(window.screen.height-document.body.scrollHeight);
    if(isIe)
    {
        setSelectState('');
    }
    var back=document.createElement("div");
    back.id="back";
    var styleStr="top:0px;left:0px;position:absolute;background:#D9D9D9;width:"+bWidth+"px;height:"+bHeight+"px;";
    styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;";
    back.style.cssText=styleStr;
    document.body.appendChild(back);
    var o = document.getElementById(id);
        o.style.display = "block";
        o.style.width = "1px";
        o.style.height = "1px";
        prox = setInterval(function(){openx(o,divWidth,divHeight)},10);

}

/*--開啟x--*/
function openx(o,openWidth,openHeight)
{

        var cx = parseInt(o.style.width);
        if(cx < openWidth)
        {
            o.style.width = (cx + Math.ceil((openWidth-cx)/1)) +"px";
        }
        else
        {
            clearInterval(prox);
            proy = setInterval(function(){openy(o,openHeight)},10);
        }
    }
function openy(o,c){/*--開啟y--*/

    var cy = parseInt(o.style.height);
    if(cy < c)
    {
        o.style.height = (cy + Math.ceil((c-cy)/10)) +"px";
    }
    else
    {
        clearInterval(proy);
    }
}

/*--關閉Div--*/
function closeed(id)
{
closeWindow();
    clearInterval(prox);
    clearInterval(proy);
    clearInterval(proxc);
    clearInterval(proyc);
    var o = document.getElementById(id);
    if(o.style.display == "block")
    {
        proyc = setInterval(function(){closey(o)},10);
    }
}
/*--關閉y--*/
function closey(o)
{
    var cy = parseInt(o.style.height);
    if(cy > 0)
    {
        o.style.height = (cy - Math.ceil(cy/10)) +"px";
    }
    else
    {
        clearInterval(proyc);
        proxc = setInterval(function(){closex(o)},10);
    }
}
/*--開啟x--*/
function closex(o)
{
    clearInterval(proxc);
    o.style.display = "none";
}
</script>

</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More