`

JS弹出窗口(背景是蒙版)

阅读更多

function alertWin(title, msg, w, h){
 var titleheight = "22px";//提示窗口标题高度
 var bordercolor = "#0051AA";//提示窗口的边框颜色
 var titlecolor = "#FFFFFF";//提示窗口的标题颜色
 var titlebgcolor = "#0051AA";//提示窗口的标题背景色
 var bgcolor = "#FFFFFF";//提示内容的背景色
 var iWidth = document.documentElement.clientWidth;
 var iHeight = document.documentElement.clientHeight;
 var bgObj = document.createElement("div");
 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);
 var msgObj=document.createElement("div");
 msgObj.style.cssText = "position:absolute;font:14px '宋体';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);
 var table = document.createElement("table");
 msgObj.appendChild(table);
 table.style.cssText = "margin:0px;border:0px;padding:0px;";
 table.cellSpacing = 0;
 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);
 //得到是从哪来的,关闭窗口后跳回。
 var path =document.getElementById("pathMsg").value;
 
 closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
 closeBtn.innerHTML = "<span style='font-size:15px; color:"+titlecolor+";'>×</span>";
 closeBtn.onclick = function(){
  document.body.removeChild(bgObj);
  document.body.removeChild(msgObj);
  //关闭窗口后跳回。
  window.location.href =path;
 }
 var msgBox = table.insertRow(-1).insertCell(-1);
 msgBox.style.cssText = "font:14px '宋体';";
 msgBox.colSpan  = 2;
 msgBox.innerHTML = "<table>"
               + "<tr>"
               + "<td><img src='/imgs/cl_2.gif'></td>"
               + "<td style='text-align:left;'>"+msg+"</td>"
                  + "</tr>"
                  + "</table>";
    //获得事件Event对象,用于兼容IE和FireFox
    function getEvent() {
     return window.event || arguments.callee.caller.arguments[0];
    }
}

分享到:
评论

相关推荐

    弹出提示框,背景压暗蒙版

    "弹出提示框,背景压暗蒙版"是一种常见的UI设计手法,它用于吸引用户的注意力并提供一个临时的信息展示空间,同时保持对当前操作环境的感知。在这个场景中,"弹出提示框"是指在用户界面中突然出现的、包含特定信息或...

    弹页面窗口

    2. **弹出窗口原理**:弹出窗口通常是通过在当前页面上覆盖一个半透明的灰色背景层(也称为蒙版)和一个独立的浮动层来实现的。灰色背景用于降低主页面的视觉焦点,让用户专注于弹出的内容。 3. **CSS样式**:为了...

    js蒙版特效

    "js蒙版特效"是利用JavaScript和jQuery库来创建的一种常见网页交互元素,它允许在页面上添加一个半透明的覆盖层,通常用于提示信息、加载动画或遮挡背景,确保用户在特定任务完成之前不会与页面其他部分互动。...

    JS实现弹出居中的模式窗口示例

    在这个示例中,我们利用JavaScript动态操作DOM元素来创建和控制弹出窗口。 要实现一个居中的弹出窗口,我们可以按照以下步骤进行: 1. **定义窗口大小和位置**: 在`OpenDialog`函数中,我们传入了三个参数:url...

    js工具方法弹出蒙版

    ### JS工具方法弹出蒙版知识点详解 #### 一、概述 在Web开发过程中,弹出蒙版(或称为模态对话框)是一种常见的交互设计模式。它可以在不离开当前页面的情况下,为用户提供一个聚焦的操作界面。本次分享的JS工具...

    微信小程序实现蒙版弹出窗功能

    这里包含一个按钮触发弹出窗,一个用于显示蒙版的`&lt;view&gt;`,以及一个包含标题和内容的弹出窗口: ```html 弹出 &lt;view catchtouchmove="preventTouchMove" class="alert-mask" wx:if="{{showModal}}"&gt;&lt;/view&gt; ...

    基于Jquery+div+css实现弹出登录窗口(代码超简单)

    本篇文章将介绍如何利用Jquery、Div和CSS技术实现一个简单的弹出登录窗口。在Web开发过程中,实现登录功能是常见需求之一,而弹出式登录窗口可以提供更好的用户体验。下面将详细介绍实现该功能的关键步骤和技术要点...

    弹出层特效

    "蒙版模式"是指在弹出层出现时,主页面背景会被一个半透明的遮罩层覆盖,这样可以防止用户在弹出层显示时与主页面的其他内容进行互动。这种设计通常用于需要用户专注于当前弹出层任务的场景,例如填写表单或确认操作...

    C# 弹出Loading遮罩层

    在C#编程中,"弹出Loading遮罩层"是一个常见的功能需求,特别是在进行异步操作或者长时间数据加载时,为了提升用户体验,我们会显示一个遮罩层,通常带有"加载中"或"请稍候"的提示信息。下面将详细解释如何在C#中...

    lightbox lightwindow效果

    1. **CSS文件**:用于定义Lightbox的样式,如弹出窗口的外观、蒙版颜色等。 2. **JavaScript文件**:包含了Lightbox的逻辑,处理点击事件、动画效果以及媒体加载。 3. **示例图片**:用于演示如何使用Lightbox的图片...

    javascript 窗口加载蒙板 内嵌网页内容

    这种技术可以广泛应用于各种web应用程序中,例如弹出层、对话框、提示框等。 javascript 实现窗口加载蒙板的技术要点 1. 创建蒙板容器:使用javascript创建一个div容器,作为蒙板的容器,并设置其样式和布局。 2....

    thickbox3.0

    综上所述,Thickbox3.0是一个强大且易用的JavaScript工具,它简化了Web应用中的弹出窗口实现,提升了用户体验,是Web开发者的得力助手。通过掌握Thickbox,开发者能够更好地创建富有吸引力和交互性的网页内容。

    div遮蒙锁定效果大全

    在网页设计中,"div遮蒙锁定效果"是一种常见的交互设计技术,用于提供更好的用户体验,例如在加载新内容、弹出对话框或者显示提示信息时,遮盖住背景页面,让用户注意力集中于特定区域。本篇文章将深入探讨如何使用...

    css+js实现部分区域高亮可编辑遮罩层

    在这个给定的文件中,涉及到的知识点主要包含了...这通常用于在不影响其他页面内容的情况下,突出显示和编辑特定部分的信息,例如在弹出窗口中编辑表单数据。该技术的应用可以极大地增强用户界面的交互性和用户体验。

    java jsp JScript技术组件

    4. **显示窗口蒙版**:窗口蒙版(Modal)常用于创建弹出式对话框,它可以遮盖住背景页面,让用户专注于当前的操作。在JSP中,可以利用JavaScript库如jQuery的modal插件或者React、Vue等现代前端框架来实现。 5. **...

    highslide-4.1.8图片特效控件

    4. **蒙版与阴影**:为了提供更好的观看环境,Highslide JS可以添加半透明蒙版和阴影效果,使得弹出的图片窗口更加立体且不会干扰背景内容。 5. **自定义控制栏**:开发者可以根据需求自定义控制栏,包括关闭按钮、...

    PSD网页切图制作HTML全过程教程

    在弹出窗口中,选择合适的格式,如JPEG或PNG,为每个切片设置适当的压缩质量和背景透明度,然后保存。 **步骤4:编写HTML结构** 根据切片,开始编写HTML代码。每个切片代表一个HTML元素,如图片、按钮或导航菜单。...

    jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    在本文中,我们将探讨如何利用jQuery操作DOM来实现页面上的遮罩层弹出效果,以及如何针对Web端和移动端防止遮罩层在滚动时发生滑动,从而确保用户体验的一致性和优化。 首先,让我们来看看页面遮罩层的基本概念。...

    网页制作三剑客课终试卷

    - AP Div可以用来创建弹出窗口、滚动条等交互式元素,增加网页的互动性。 7. **框架网页**: - 使用HTML框架将多个页面内容集成在同一浏览器窗口中显示。 - 框架技术可以有效组织复杂的信息结构,提高用户体验。...

Global site tag (gtag.js) - Google Analytics