JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例

本文实例讲述了JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能。分享给大家供大家参考，具体如下：

HTML部分：

<div id="div">点击除开div的区域可以弹出弹窗</div>
<div id="cover"></div>
<div id="box">点击除开div和弹窗的区域可以关闭弹窗</div>

CSS部分：

#div{
  /*设置z-index属性必须设置position:relative或absolute*/
  position:relative;
  /*设置div位于遮罩的上方*/
  z-index:2;
  width:300px;
  height:200px;
  border:1px solid grey;
}
#cover{
  position:fixed;
  width:100%;
  height:100%;
  left:0;
  top:0;
  /*设置遮罩位于div的下方*/
  z-index:1;
}
#box{
  border:1px solid grey;
  /*当弹窗显示时，屏幕滚动时，弹窗始终保持位置固定在屏幕正中，不随屏幕滚动而变化位置*/
  position:fixed;
  width:400px;
  height:300px;
  left:50%;
  top:50%;
  /*配合left:50%和top:50%属性使得浮出层的中心默认在屏幕正中，margin-top为height的一半，margin-left为width的一半*/
  margin:-150px 0 0 -200px;
  /*设置弹窗位于遮罩的上方*/
  z-index:2;
  /*开始时隐藏弹窗*/
  display:none;
}

JavaScript部分：

document.getElementById("cover").onclick = function() {
  if (document.getElementById("box").style.display == "block") {
    document.getElementById("box").style.display = "none";
    document.getElementById("cover").style.background = "white";
  }
  else {
    document.getElementById("box").style.display = "block";
    document.getElementById("cover").style.background = "#aaa";
  }
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试一下运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JS封装的模仿qq右下角消息弹窗功能示例

    JS封装的模仿qq右下角消息弹窗功能示例

    本文实例讲述了JS封装的模仿qq右下角消息弹窗功能.分享给大家供大家参考,具体如下: 在我们的日常开发中,或者生活中,经常需要用到弹出窗.这里我们就用js模拟一下qq消息一样的弹出窗. 直接贴代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

  • JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 "> </div> <!

  • JS中confirm,alert,prompt函数区别分析

    window.alert:参数,只有一个,显示警告框的信息; 无返回值. <script> window.alert("确定.") </script> window.confirm : 参数就只有一个.显示提示框的信息. 按确定,返回true; 按取消返回false. <script> var bln = window.confirm("确定吗?"); alert(bln) </script> window.promp

  • 简述JS浏览器的三种弹窗

    1.alert:使用alert弹框提示信息,最后都会被转化为字符串输出(因为调用了toString这个方法).比如alert(1+1)弹出的结果应该是字符串形式的"2". 2.Confirm:在alert基础上增加了让用户选择性的操作(提供两个按钮:确定和取消) 比如:var  delin = confirm('你确定要删除吗?'); 这一句,当用户点击确定按钮的时候,我们接受到的结果是true,点击的是取消按钮的时候,我们接受到的结果是false,此后我们可以根据不同的结果做不同的处

  • javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)

    1.警告框alert() 复制代码 代码如下: alert("欢迎光临!"); 2.信息框confirm(),有取消,确定按钮 复制代码 代码如下: if (confirm("你同意吗?")) { alert("同意"); } else { alert("不同意"); } 3.提示框prompt(),用于提示用户输入一些文本 复制代码 代码如下: var result = prompt("您尊姓大名?",&

  • JS实现自定义弹窗功能

    众所周知,浏览器自带的原生弹窗很不美观,而且功能比较单一,绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等.前段时间在 慕课网 上看到了一个自定义弹窗的实现,自己顺便就学习尝试写了下,下面是主要的实现代码并添加了比较详细的注释,分享出来供大家参考.(代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,后面有时间更新为一个兼容性较好的es5版本) HTML部分:(没什么内容 放置一个按钮调用函数,js中调用实例即可供参考) <!DOCTYPE html

  • javascript中常见的3种信息提示框(alert,prompt,confirm)

    1.警告提示框 alert("文本"). ex. function disp_alert() { alert("我是警告框!!"+'\n'+"hhah")//有折行 } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 2.确认提示框(confirm,返回true或者false) function show_confirm() { var r=confirm("Press a button!"); if (r==tr

  • Javascript中弹窗confirm与prompt的区别

    confirm 使用confirm,浏览器可以弹出一个确认框. 使用确认消息框可向用户问一个"是-或-否"问题,并且用户可以选择单击"确定"按钮或者单击"取消"按钮.confirm 方法的返回值为 true 或 false.该消息框也是模式对话框:用户必须在响应该对话框(单击一个按钮)将其关闭后,才能进行下一步操作. prompt  提示消息框提供了一个文本字段,用户可以在此字段输入一个答案来响应您的提示.该消息框有一个"确定"

  • JS中confirm,alert,prompt函数使用区别分析

    window.alert:参数,只有一个,显示警告框的信息; 无返回值. <script> window.alert("确定.") </script> window.confirm : 参数就只有一个.显示提示框的信息. 按确定,返回true; 按取消返回false. <script> var bln = window.confirm("确定吗?"); alert(bln) </script> window.promp

  • JS实现仿微信支付弹窗功能

    先奉上效果图 html代码 <!DOCTYPE html> <html> <head> <title>仿手机微信支付输入密码界面效果</title> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no"

随机推荐