弹出层并随滚动而动

弹出层

view plain
<!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" xml:lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <style type="text/css">
        *{margin:0;padding:0;}
        body{background:#fff;font-size:12px;}
        .drag_wrap{width:500px;height:300px;position:absolute;border:1px solid #ccc;display:none;z-index:3;background:#fff;}
        .drag_wrap h1{position:relative;height:35px;line-height:35px;text-indent:1em;font-size:14px;cursor:move;font-weight:normal;background:#efefef;border-bottom:1px solid #ccc;}
        .drag_wrap h1 span{position:absolute;font-size:12px;bottom:1px;right:10px;cursor:pointer;}
        .drag_cont{padding:10px;line-height:23px;text-indent:2em;}
        .mask{position:absolute;left:0;top:0;z-index:2;background:#000;filter:alpha(opacity=50);opacity: 0.5;}
        .in{margin:50px auto;width:80px;}
    </style>
</head>
<body>
    <div class="in"><input type="button" value="猛击我" onclick="drag.init().move('drag')" /></div>
    <div class="in"><a href="###" onclick="drag.init('drag2').move('drag2')">铁道部回应京沪高铁频出故障：设备处于磨合期</a></div>

    <div id="drag2" class="drag_wrap">
        <h1>铁道部回应京沪高铁频出故障<span>关闭</span></h1>
        <div class="drag_cont">
            <p>各位网友好！首先我要感谢人民网强国论坛为我提供与广大网友再聚的机会。在我来之前，看了许多网友的留言，其中就有一位网友提醒我要做好挨骂和挨拍的准备。是的，今天来到这里，就是代表铁路系统向大家真诚道歉、说明情况。京沪高铁开通半个月以来，总体客流和服务情况是好的。但近几天连续发生故障，影响列车正常运行</p>
            <p>6月30日，京沪高铁开通运营。请您介绍一下总体运营情况，比如开行列车数量、运送旅客人数、正点率、安全情况等。</p>
        </div>
    </div>

    <script type="text/javascript">
        var drag = {
            $: function(){ return document.getElementById(arguments[0]);},

            /**
             * 得到视口的大小
             */
            getWindowsSize: function(){
                var de = document.documentElement,
                    pageWidth = window.innerWidth,
                    pageHeight = window.innerHeight;
                if(typeof pageWidth != 'number'){ //如果pageWidth不是数字,则ie,非ie支持innerWidth
                    if(document.compatMode == 'CSS1Compat'){ //Standars mode 标准模式，完整dtd
                        pageWidth = de.clientWidth;
                        pageHeight = de.clientHeight;
                    } else { //如果是 Quirks mode
                        pageWidth = document.body.clientWidth;
                        pageHeight = document.body.clientHeight;
                    }
                }
                return {
                    width: pageWidth,
                    height: pageHeight
                }
            },

            /**
             * 创建标签
             * @param {String} target 标签名称，为空则创建一个空的div
             * @param {Object} config 属性列表
             */
            createElement: function(target, config){
                target = target || 'div';
                config = config || {};

                var tag = document.createElement(target);
                for(var p

补充：web前端 , JavaScript ,