【岁月留声（Javascript）】模拟弹出windows窗口

Kida 的技术小屋

已于 2024-02-21 09:27:32 修改

阅读量687

点赞数

分类专栏：岁月留声文章标签： javascript

于 2016-05-11 23:02:34 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/kida_yuan/article/details/51379168

版权

岁月留声专栏收录该内容

75 篇文章 0 订阅

订阅专栏

以下例子的内容已经忘了在哪里拿到的例子了，文章发布时先写成“原创”内容，若涉及到侵权行为，请作者主动联系我进行删除，谢谢。

<!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=gbk" />
      <title>可拖动全屏弹出层提示窗口,破洛洛提供演示</title>
      <script language="javascript">
            function alertWin(title, msg, w, h) {
                  var titleheight = "22px"; // 提示窗口标题高度 
                  var bordercolor = "#666699"; // 提示窗口的边框颜色 
                  var titlecolor = "#FFFFFF"; // 提示窗口的标题颜色 
                  var titlebgcolor = "#666699"; // 提示窗口的标题背景色
                  var bgcolor = "#FFFFFF"; // 提示内容的背景色

                  var iWidth = document.documentElement.clientWidth; //获取客户端浏览器宽度
                  var iHeight = document.documentElement.clientHeight; //获取客户端浏览器高度

                  //这里是第一个div,这个div是负责遮罩背景的
                  var bgObj = document.createElement("div");
                  //加入背景div的css属性
                  bgObj.style.cssText = "position:absolute;left:0px;" +
                        "top:0px;width:" + iWidth + "px;" +
                        "height:" + Math.max(document.body.clientHeight, iHeight) + "px;" +
                        "filter:Alpha(Opacity=30);" +
                        "opacity:0.3;" +
                        "background-color:#000000;" +
                        "z-index:101;";
                  document.body.appendChild(bgObj);

                  //这里是第二个div,这个div是现实内容框
                  var msgObj = document.createElement("div");
                  msgObj.style.cssText = "position:absolute;" +
                        "font:11px '宋体';" +
                        "top:" + (iHeight - h) / 2 + "px;" +
                        "left:" + (iWidth - w) / 2 + "px;" +
                        "width:" + w + "px;" +
                        "height:" + h + "px;" +
                        "text-align:center;" +
                        "border:1px solid " + bordercolor + ";" +
                        "background-color:" + bgcolor + ";" +
                        "padding:1px;" +
                        "line-height:22px;" +
                        "z-index:102;";
                  document.body.appendChild(msgObj);

                  //在第二个div里面加载一个table
                  var table = document.createElement("table");
                  msgObj.appendChild(table);
                  table.style.cssText = "margin:0px;" +
                        "border:0px;" +
                        "padding:0px;";
                  table.cellSpacing = 0;
                  //js生成table
                  var tr = table.insertRow(-1);
                  var titleBar = tr.insertCell(-1);
                  titleBar.style.cssText = "width:100%;" +
                        "height:" + titleheight + "px;" +
                        "text-align:left;" +
                        "padding:3px;" +
                        "margin:0px;" +
                        "font:bold 13px '宋体';" +
                        "color:" + titlecolor + ";" +
                        "border:1px solid " + bordercolor + ";" +
                        "cursor:move;" +
                        "background-color:" + titlebgcolor;
                  titleBar.style.paddingLeft = "10px";
                  titleBar.innerHTML = title;

                  var moveX = 0;
                  var moveY = 0;
                  var moveTop = 0;
                  var moveLeft = 0;
                  var moveable = false;

                  var docMouseMoveEvent = document.onmousemove;
                  var docMouseUpEvent = document.onmouseup;

                  titleBar.onmousedown = function () {
                        var evt = getEvent();
                        moveable = true;
                        moveX = evt.clientX;
                        moveY = evt.clientY;
                        moveTop = parseInt(msgObj.style.top);
                        moveLeft = parseInt(msgObj.style.left);

                        document.onmousemove = function () {
                              if (moveable) {
                                    var evt = getEvent();
                                    var x = moveLeft + evt.clientX - moveX;
                                    var y = moveTop + evt.clientY - moveY;
                                    if (x > 0 && (x + w < iWidth) && y > 0 && (y + h < iHeight)) {
                                          msgObj.style.left = x + "px";
                                          msgObj.style.top = y + "px";
                                    }
                              }
                        };
                        document.onmouseup = function () {
                              if (moveable) {
                                    document.onmousemove = docMouseMoveEvent;
                                    document.onmouseup = docMouseUpEvent;
                                    moveable = false;
                                    moveX = 0;
                                    moveY = 0;
                                    moveTop = 0;
                                    moveLeft = 0;
                              }
                        };
                  }

                  var closeBtn = tr.insertCell(-1);
                  closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
                  closeBtn.innerHTML = "<span style='font-size:15pt; color:" + titlecolor + ";'>×</span>";

                  closeBtn.onclick = function () {
                        document.body.removeChild(bgObj);
                        document.body.removeChild(msgObj);
                  }

                  var msgBox = table.insertRow(-1).insertCell(-1);
                  msgBox.style.cssText = "font:10pt '宋体';";
                  msgBox.colSpan = 2;
                  msgBox.innerHTML = msg;
                  // 获得事件Event对象，用于兼容IE和FireFox
                  function getEvent() {
                        return window.event || arguments.callee.caller.arguments[0];
                  }
            } 
      </script>
</head>

<body>
      <input type="button" value="点这里" onclick="alertWin('标题','这里是内容',1000,400);" />
      <br>
      <br>
      <br>
      <br>
</body>

</html>