js弹窗 js弹出DIV,并使整个页面背景变暗
2024-10-15 08:31:01
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>
效果:
最新文章
- 那些年我们学过的构造函数(构造方法,C#)
- android include进来的组件 调用其子元素
- 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(二)鹰眼模块
- HDU1003 简单DP
- Android 之 2048 的游戏逻辑分析
- FastDFS的安装配置
- smarty 初始配置文件
- //相当于深拷贝一份dataArray。这样才不会改变dataArray本身的值
- List集合分页显示
- (中等) HDU 4979 A simple math problem. , DLX+重复覆盖+打表。
- 10970 - Big Chocolate
- java并发之可见性与原子性:Syncronized和volatile
- 剑指offer 1.数组 二维数组中查找
- 读vue-0.6-text-parser.js源码
- eoe移动开发者大会—移动开发者的极客盛宴 2013年9月14日期待您的加入!!
- INTEST/EXTEST SCAN
- rtorrent - 强大的命令行BT客户端
- 网卡bonding模式 - bond0、1、4配置
- JProfiler 简要使用说明
- 使用eclipse 开发lisp
热门文章
- 解决 canvas 绘图在高清屏中的模糊问题
- OSX10.12搭建IPv6本地环境测试APP
- Shell - 简明Shell入门07 - 数组(Array)
- [Leetcode]44.跳跃游戏Ⅰ&;&;45.跳跃游戏Ⅱ
- Django + Uwsgi + Nginx 实现生产环境 项目部署
- [Fatal Error] :3:13: Open quote is expected for attribute ";{1}"; associated with an element type ";id";.
- Facade外观模式(结构性模式)
- Intellij添加Jetty远程Debug
- SpringBoot + docker + neo4j
- Docker概念学习系列之Docker核心概念之仓库Repository