美女视频黄的,美女视频全免黄频

js彈出層、遮罩、div層的幾種效果

2013.09.09

第一種：彈出層、遮罩層、div層

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<HTML xmlns="http://www.w3.org/1999/xhtml%22%3E%3CHEAD%3E%3CTITLE%3EJAVASCRIPT彈出DIV層窗口實(shí)例</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style>
#popupcontent{ position: absolute; visibility: hidden; overflow: hidden; border:1px solid #CCC; background-color:#F9F9F9; border:1px solid #333; padding:5px;}

</style>
<script>
var baseText = null;
function showPopup(w,h){
    var popUp = document.getElementById("popupcontent");
    popUp.style.top = "200px";
    popUp.style.left = "200px";
    popUp.style.width = w + "px";
    popUp.style.height = h + "px";
    if (baseText == null) baseText = popUp.innerHTML;
    popUp.innerHTML = baseText + "<div id=\"statusbar\"><input type=\"button\" value=\"Close window\" onClick=\"hidePopup();\"></div>";
    var sbar = document.getElementById("statusbar");
    sbar.style.marginTop = (parseInt(h)-60) + "px";
    popUp.style.visibility = "visible";
}
function hidePopup(){
    var popUp = document.getElementById("popupcontent");
    popUp.style.visibility = "hidden";
}
</script>
<META content="MSHTML 6.00.2900.2838" name=GENERATOR></HEAD>
<BODY>
<div id="popupcontent">這是一個(gè)DIV彈窗效果!</div>
<p><a href="#" onmouseover="showPopup(300,200);" >將鼠標(biāo)移動(dòng)到此</a><p>
<p><a href="#" onclick="showPopup(300,200);" >點(diǎn)擊這里查看彈出窗口</a></p>
</BODY>
</HTML>

第二種：彈出層、遮罩層、div層

<html>
<head>
<style>
<!--
body{font-family:宋體; font-size:12px; padding:0px; margin:0px;}
.showWindow:hover{color:#FF0000}

.win_bg{background:#CCC; opacity:0.2; filter:alpha(opacity=20); position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:998;}
.winTitle{background:#9DACBF; height:20px; line-height:20px}
.winTitle .title_left{font-weight:bold; color:#FFF; padding-left:5px; float:left}
.winTitle .title_right{float:right}
.winTitle .title_right a{color:#000; text-decoration:none}
.winTitle .title_right a:hover{text-decoration:underline; color:#FF0000}
.winContent{padding:5px;}
-->
</style>
<script language="javascript">
function showWindow(){
if(document.getElementById("divWin"))
{
   $("divWin").style.zIndex=999;
   $("divWin").style.display="";
}
else
{
   var objWin=document.createElement("div");
   objWin.id="divWin";
   objWin.style.position="absolute";
   objWin.style.width="520px";
   objWin.style.height="220px";
   objWin.style.border="2px solid #AEBBCA";
   objWin.style.background="#FFF";
   objWin.style.zIndex=999;
   document.body.appendChild(objWin);
}

if(document.getElementById("win_bg"))
{
   $("win_bg").style.zIndex=998;
   $("win_bg").style.display="";
}
else
{
   var obj_bg=document.createElement("div");
   obj_bg.id="win_bg";
   obj_bg.className="win_bg";
   document.body.appendChild(obj_bg);
}

第三種：彈出層、遮罩層、div層

自己下載個(gè)jquery.min.js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javaScript" src="jquery.min.js"></script>
<script language="JavaScript">
function showWindow(){

        mask=document.createElement("div");
        var W=$(document).width();
        var H=$(document).height();
        mask.id="mask";
        mask.style.cssText="position:absolute;z-index:5;width:"+W+"px;height:"+H+"px;background:#000;filter:alpha(opacity=30);opacity:0.3;top:0;left:0;";
        document.body.appendChild(mask);
        var o = document.getElementById("edit");
        o.style.display="block";
        o.style.top="253px";
        o.style.left="400px";
    }
</script>
</head>
<body>
<a href="javascript:showWindow()">點(diǎn)擊</a>

</form>
</div>
</body>
</html>

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開APP，閱讀全文并永久保存查看更多類似文章

JS實(shí)現(xiàn)DIV層隨滾動(dòng)條滾動(dòng)

點(diǎn)擊不同鏈接彈出不同div層

使用 PHP 和 DHTML 設(shè)計(jì) Web 2.0 應(yīng)用程序，第 1 部分: 使用這些技術(shù)打造有特色的應(yīng)用

非常實(shí)用的彈窗特效代碼

創(chuàng)建一個(gè)彈出DIV窗口

003

更多類似文章 >>

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看