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> <!-- 弹窗 -->
<div id="showdiv" style="width: 80%; margin: 0 auto; height: 9.5rem; border: 1px solid #999; display: none; position: absolute; top: 40%; left: 10%; z-index: 3; background: #fff">
<!-- 标题 -->
<div style="background: #F8F7F7; width: 100%; height: 2rem; font-size: 0.65rem; line-height: 2rem; border: 1px solid #999; text-align: center;" >
提示
</div>
<!-- 内容 -->
<div style="text-indent: 50px; height: 4rem; font-size: 0.5rem; padding: 0.5rem; line-height: 1rem; "></div>
<!-- 按钮 -->
<div style="background: #418BCA; width: 80%; margin: 0 auto; height: 1.5rem; line-height: 1.5rem; text-align: center;color: #fff;margin-top: 1rem; -moz-border-radius: .128rem; -webkit-border-radius: .128rem; border-radius: .128rem;font-size: .59733rem;" onclick="closeWindow()">
确 定
</div>
</div>

js代码:(把jq引进来)

<script type="text/javascript">
  
// 弹窗
function showWindow(showmsg) {
$('#showdiv').show(); //显示弹窗
$('.content').append(showmsg); //追加内容
$('#cover').css('display','block'); //显示遮罩层 } // 关闭弹窗
function closeWindow() {
$('#showdiv').hide(); //隐藏弹窗
$('#cover').css('display','none'); //显示遮罩层
$('#showdiv .content').html(""); //清空追加的内容
} //调用
showWindow('js弹窗 js弹出DIV,并使整个页面背景变暗'); </script>

效果:

js弹窗 js弹出DIV,并使整个页面背景变暗的更多相关文章

  1. js点击弹出div层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JS向右弹出DIV,点击可向左隐藏。我用jquery可以从左下角像右上角隐藏,怎么从做向右隐藏呢?

    弹出的DIV如果是绝对定位,就用right固定位子,如果不是就用float:right:Jquery中有个函数animate是自定义动画效果,$("#shou").click(fu ...

  3. js弹出div层,弹出层页面底部出现UL出现一条线问题

    整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...

  4. 文字添加响应事件,js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  5. 使用js弹出div刷新时闪烁解决方法

    <div style="visibility: hidden"> //弹出div内容 </div>

  6. js弹出div层内容(按回退键关闭div层及遮罩)

    <!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...

  7. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  8. JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...

  9. js进阶 11-20 弹出层如何制作

    js进阶 11-20 弹出层如何制作 一.总结 一句话总结:其实就是一个div,控制显示和隐藏即可.设置成绝对定位更好,就可以控制弹出层出现的位置.关闭的画质需要将display重新设置为none就好 ...

随机推荐

  1. web端权限维持【好文】

    前言 关于权限维持,我之前写过一篇基于系统端的后门技术文章,如映像劫持啊,lpk之类. 内容目录: - 构造文件包含漏洞- 隐蔽性脚本木马- 构造sql注入点 正文 0x01 构造文件包含漏洞 > ...

  2. CuratorFramework使用

    CuratorFrameworkFramework是ZooKeeper Client更高的抽象API 自动连接管理: 1. 当ZooKeeper客户端内部出现异常, 将自动进行重连或重试, 该过程对外 ...

  3. [Vue] vue-cli3.0安装

    1. node.js安装https://nodejs.org/en/download/ 2.npm的安装 由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 &qu ...

  4. 如何做好错误处理?(PHP篇)

    起因 之前我在封装 PHP 一个类库的时候,如果有遇到错误(例如构造函数传参不合法的话),则直接 die() ,后来发现这种方法很不好,会直接退出程序. 所以我想到给 PHP 上异常捕获的机制了. 错 ...

  5. 一步步Cobol 400上手自学入门教程05 - 表

    在COBOL中有几类典型结构的表.这几类典型结构的表在大体上可分为下标表和索引表两大类.另外,根据表的重复次数定义又有定长表和变长表.此外,表还允许嵌套,因此还有嵌套表.这几类表均符合表的基本定义,都 ...

  6. 深入理解Spring的异步机制

    一.Spring中实现异步执行 在这里我先以事件的机制举例,注意默认情况下事件的发布与监听都是同步执行的.那么我们来看一看基于异步事件的例子该怎么写 首先还是定义事件: package com.bdq ...

  7. 生产者消费者模式中条件判断是使用while而不是if

    永远在循环(loop)里调用 wait 和 notify,不是在 If 语句现在你知道wait应该永远在被synchronized的背景下和那个被多线程共享的对象上调用,下一个一定要记住的问题就是,你 ...

  8. 全网最详细的zkfc启动以后,几秒钟以后自动关闭问题的解决办法(图文详解)

    不多说,直接上干货! 问题详情 情况描述如题所示,zkfc启动以后,几秒钟以后自动关闭. 解决办法: 1.检查下每台机器的时间是否同步: 2.检查下每台机器的防火墙是否关闭: 3.查看zkfc的日志路 ...

  9. 自制“低奢内”CSS3登入表单,包含JS验证,请别嫌弃哦。

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...

  10. 解决org.apache.rat:apache-rat-plugin:0.8:check (default) on project hbase: Too many unapproved license

    maven打包的时候报错: 报错信息: [ERROR] Failed to execute goal org.apache.rat:apache-rat-plugin:0.8:check (defau ...