JQuery弹出模式窗口的例子_www.


  .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: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 2px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
    } 
   
   
        function openWindow(){
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block';
        }
        function closeWindow(){
    document.getElementById('light').style.display='none';
    document.getElementById('fade').style.display='none';
        }
   

可以根据自己要求修改css样式
   

   
   
   

jquery弹出层_www.


$(function()
{
   $("#btnShow").click(function()
   {
   var str="弹出对话框示例";
   $(".form").html(str);
   $("#BgDiv").css({ display:"block",height:$(document).height()});
   var yscroll=document.documentElement.scrollTop;
   $("#DialogDiv").css("top","100px");
   $("#DialogDiv").css("display","block");
   document.documentElement.scrollTop=0;
   });
   $("#btnClose").click(function()
   {
   $("#BgDiv").css("display","none");
   $("#DialogDiv").css("display","none");
   });
});


var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(document).ready(function(){
   $("#DialogDiv").click(function(){  
  }).mousedown(function(e){
   _move=true;
   _x=e.pageX-parseInt($("#DialogDiv").css("left"));
   _y=e.pageY-parseInt($("#DialogDiv").css("top"));
   $("#div2").fadeTo(20, 0.25);//点击后开始拖动并透明显示
   });
   $(document).mousemove(function(e){
   if(_move){
   var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
   var y=e.pageY-_y;
   $("#DialogDiv").css({top:y,left:x});//控件新位置
   }
   }).mouseup(function(){
   _move=false;
   $("#DialogDiv").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
   });
});


body,h2{margin:0 ; padding:0;}
#BgDiv{background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
#DialogDiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#DialogDiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
#DialogDiv .form{padding:10px;}