网站首页 极客学院 视频课堂 极客论坛 下载专区 行业新闻 欢迎光临极客研究院,今天是2019-08-24 星期六
会员面板
帐号:
密码:
验证码:
极客学院
教程搜索
输入要搜索的内容:

下载专区
精品教程
   网站首页 > WEB开发 > Jquery/mobile教程 > JS显示遮罩层窗口完美实例

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=utf-8" />
<title>金极客</title>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<style>
#previewDiv{z-index: 9999;position:absolute;display:none; width:80%; height:700px; background:#fff;border-top:5px solid #999;border-bottom:7px solid #999;border-left:5px solid #999;border-right:7px solid #999;}
.mask {color:#C7EDCC;background-color:#999;position:absolute;top:0px;left:0px;width:100%;height:3000px;opacity: 0.6;filter: "alpha(opacity=60)";filter: alpha(Opacity=80);}
</style>
<script>
    $.ajaxSetup({
            cache: false
    });
    function open_gn_window(gurl)
    {
            //添加并显示遮罩层
            $("<div id='mask'></div>").addClass("mask").click(function() {}) .appendTo("body").fadeIn(0);
            document.getElementById("mask").style.display = "block";
            var windowWidth = document.documentElement.clientWidth;
            var windowHeight = document.documentElement.clientHeight;
            var popupHeight = $("#previewDiv").height();
            var popupWidth = $("#previewDiv").width();
            $("#previewDiv").css({
              "position": "absolute",
              "top": (windowHeight-popupHeight)/2+$(document).scrollTop(),
              "left": (windowWidth-popupWidth)/2
            });
            
        $("#previewDiv").show();
        $.ajax({url:gurl,success:function(result){
                $("#dbox").html(result);
        }});
    }
    function hide_gn_window(){
    $("#mask").remove();
    $("#previewDiv").hide();
  }
</script>
</head>

<body>

<a href="#" onclick="open_gn_window('http://www.kimgeek.com')">打开遮罩窗口</a>
</body>
</html>



<div id="previewDiv">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr bgcolor="#6666FF">
    <td>显示遮罩层弹窗(教程原创:王颂元 <a href="http://www.kimgeek.com">www.kimgeek.com</a>)</td>
    <td align="right"><input type="button" value="✖" onclick="hide_gn_window();"/></td>
  </tr>
</table>

   <div id="dbox" style="overflow:scroll;height:100%;">


  </div>
</div>

  相关文章
本文标题:JS显示遮罩层窗口完美实例
对本文有疑问?现在就进入论坛提问>>
 
粤ICP备18090445号