js弹出层的实现代码

发布时间:2019-12-17编辑:脚本学堂
分享一例js实现的弹出层效果,有关闭按钮,可以随意修改弹出层的参数。有需要的朋友参考学习下。

本节内容:
js弹出层代码。

例子:
 

复制代码 代码示例:
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>jquery弹出层效果-www.jb200.com</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> 
<meta content="jQuery弹出层效果,有关闭按钮,可以随意修改弹出层的参数。" name="description" /> 
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<style> 
.black_overlay{ 
display: none; 
position: absolute; 
top: 0%; 
left: 0%; 
width: 100%; 
height: 100%; 
background-color: black; 
z-index:1001; 
-moz-opacity: 0.8; 
opacity:.80; 
filter: alpha(opacity=80); 

.white_content { 
display: none; 
position: absolute; 
top: 10%; 
left: 10%; 
width: 80%; 
height: 80%; 
border: 16px solid lightblue; 
background-color: white; 
z-index:1002; 
overflow: auto; 

.white_content_small { 
display: none; 
position: absolute; 
top: 20%; 
left: 30%; 
width: 40%; 
height: 50%; 
border: 16px solid lightblue; 
background-color: white; 
z-index:1002; 
overflow: auto; 

</style> 
<script type="text/javascript"> 
//弹出隐藏层 
function ShowDiv(show_div,bg_div){ 
document.getElementById(show_div).style.display='block'; 
document.getElementById(bg_div).style.display='block' ; 
var bgdiv = document.getElementById(bg_div); 
bgdiv.style.width = document.body.scrollWidth; 
// bgdiv.style.height = $(document).height(); 
$("#"+bg_div).height($(document).height()); 
}; 
//关闭弹出层 
function Closediv(show_div,bg_div) 

document.getElementById(show_div).style.display='none'; 
document.getElementById(bg_div).style.display='none'; 
}; 
 
$(function(){ 
    $("input[id^='txt']").get(0).focus();  
 
    //----- 
    var trs=    $("#tb1 tr:gt(0):not(:last):not(:last)"); 
    console.log(trs); 
    var total=$("#tb1 tr:last"); 
    console.log(total); 
}) 
</script> 
</head> 
<body> 
<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" /> 
<!--弹出层时背景层DIV--> 
<div id="fade" class="black_overlay"> 
</div> 
<div id="MyDiv" class="white_content"> 
<div style="text-align: right; cursor: default; height: 40px;"> 
<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span> 
</div> 
不错的弹出层,你喜欢,我喜欢,大家都喜欢。
脚本学堂,倾情提供。 
</div> 
<input type="text" id="txt1"> 
<input type="text" id="txt2"> 
<input type="text" id="txt3"> 
 
<table id="tb1" cellspacing="1" cellpadding="5" border="1"> 
<tr id="tr1"> 
    <td>名称</td> 
    <td>数量</td> 
    <td>积分</td> 
    <td>id</td> 
</tr> 
<tr > 
    <td>xxx名称</td> 
    <td>xxx数量</td> 
    <td>xxx积分</td> 
    <td>xxid</td> 
</tr> 
<tr > 
    <td>xxx名称</td> 
    <td>xxx数量</td> 
    <td>xxx积分</td> 
    <td>xxid</td> 
</tr> 
<tr > 
    <td>xxx名称</td> 
    <td>xxx数量</td> 
    <td>xxx积分</td> 
    <td>xxid</td> 
</tr> 
<tr > 
    <td colspan="4">合计</td> 
</tr> 
<tr > 
    <td>xxx名称</td> 
    <td>xxx数量</td> 
    <td>xxx积分</td> 
    <td>xxid</td> 
</tr> 
</table> 
</body> 
</html>

您可能感兴趣的文章:
js实现弹出窗口之弹出层的例子
点击div弹出层的效果代码举例
js鼠标滑过弹出层的定位IE6中bug的解决办法