<script type="text/javascript">

        /*         * 弹出DIV层         */  

       function showDiv() {

            var Idiv = document.getElementById("Idiv");

            var mou_head = document.getElementById(‘mou_head‘);

            Idiv.style.display = "block";

            //以下部分要将弹出层居中显示

            Idiv.style.left = (document.documentElement.clientWidth - Idiv.clientWidth) / 2 + document.documentElement.scrollLeft + "px";

            Idiv.style.top = (document.documentElement.clientHeight - Idiv.clientHeight) / 2 + document.documentElement.scrollTop - 30 + "px";

            //以下部分使整个页面至灰不可点击

            var procbg = document.createElement("div");

//首先创建一个div

            procbg.setAttribute("id", "mybg"); //定义该div的id

            procbg.style.background = "#000000";

            procbg.style.width = "100%";

            procbg.style.height = "100%";

            procbg.style.position = "fixed";

            procbg.style.top = "0";

            procbg.style.left = "0";

            procbg.style.zIndex = "500";

            procbg.style.opacity = "0.6";

            procbg.style.filter = "Alpha(opacity=70)";

            //背景层加入页面

            document.body.appendChild(procbg);

            document.body.style.overflow = "hidden"; //取消滚动条

            //以下部分实现弹出层的拖拽效果

            var posX;             var posY;

            mou_head.onmousedown = function(e) {

                if (!e) e = window.event; //IE

                posX = e.clientX - parseInt(Idiv.style.left);

                posY = e.clientY - parseInt(Idiv.style.top);

                document.onmousemove = mousemove;

            }

            document.onmouseup = function() {

                document.onmousemove = null;

            }

            function mousemove(ev) {

                if (ev == null) ev = window.event; //IE

                Idiv.style.left = (ev.clientX - posX) + "px";

                Idiv.style.top = (ev.clientY - posY) + "px";

            }

        }

        function closeDiv() //关闭弹出层

        {

            var Idiv = document.getElementById("Idiv");

            Idiv.style.display = "none";

            document.body.style.overflow = "auto"; //恢复页面滚动条

            var body = document.getElementsByTagName("body");

            var mybg = document.getElementById("mybg");

            body[0].removeChild(mybg);

        }

        $(function() {

            $("#btntcc").click(function() {

                showDiv();

            });

        });

    </script>

 <input type="button" id="btntcc" value="测试" /></div>
        <div id="Idiv" style="display: none; position: absolute; width: 360px; height: 450px;
            z-index: 1000; background: #67a3d9;">
            <div id="mou_head" style="width: 300px; height: 400px; z-index: 1; padding-top: 50px;
                position: absolute;">              
            </div>
            <input type="button" style="float: right; padding-top: 7px;" value="关闭" onclick="closeDiv();" />
        </div>

页面DIV弹出层 JS原生脚本,布布扣,bubuko.com

页面DIV弹出层 JS原生脚本