转载:
http://blog.csdn.net/li_xiao_ming/article/details/6738922
如图:
代码:
html(使用opacity的话content无法变为不透明,所有这里使用了background:rgba(0,0,0,0.3))属性来设置透明
<button class = 'btn'>点击显示</button>
<div class = "bg-model" style="position:absolute;top:0%;left:0%;display:none;background:rgba(0,0,0,0.3);width:100%;height:100%;position:fixed;z-index:9999">
<div class = 'content' style="position: absolute;left: 35%;top: 25%;border-radius: 8px;width: 30%;height: 40%;background-color: #fff;">
</div>
</div>
js
//加入购物车点击事件
$(".cart-add").click(function () {
$(".bg-model").fadeTo(300,1)
//隐藏窗体的滚动条
$("body").css({ "overflow": "hidden" });
}); //模态框OK按钮点击事件
$(".bg-model-ok").click(function () {
$(".bg-model").hide();
//显示窗体的滚动条
$("body").css({ "overflow": "visible" });
}).hover(function () {
$(this).css({ "backgroundColor": "#8CC8C8" });
}, function () {
$(this).css({ "backgroundColor": "#8CD4E6" });
});
JQuery------制作div模态框的更多相关文章
-
jQuery制作div板块拖动层排序
html结构: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
-
jquery 修改 bootstrap模态框的宽度并且居中
1.定义模态框 <div class="modal fade" id="Project_Cell_Modal" tabindex="-1&quo ...
-
jquery设置div,文本框 表单的值示例
我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML标记)val() - 设置或返回表单字段的值 1 ...
-
jQuery 实现 bootstrap 模态框 删除确认
思路: 点击删除按钮,通过jquery将删除操作的URL赋值到页面URL元素,并弹出会话框 用户点击确认,通过jquery获取URL,并发送删除请求至后台. 一.删除button <a clas ...
-
<;jquery>;基本的模态框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
-
Boostrap模态框,以及通过jquery绑定td的值,使模态框回显
做页面不管是登录或是修改信息,难免会使用到模态框,在此分享一个比较漂亮的模态框 Boostrap模态框 使用之前首先导入jquery-3.2.1.min.js,和bootstrap.min.js 先添 ...
-
第二百四十三节,Bootstrap模态框插件
Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...
-
Django:使用模态框新增数据,成功后提示“提交成功”,并刷新表格bootstrap-table数据
废话不说先看图: 代码实现: 前台代码: {% load staticfiles %} <!DOCTYPE html> <html lang="en"> ...
-
bootstrap-table:操作栏点击编辑按钮弹出模态框修改数据
核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...
随机推荐
-
python gui之tkinter界面设计pythonic设计
ui的设计,控件id的记录是一件比较繁琐的事情. 此外,赋值和读取数据也比较繁琐,非常不pythonic. 有没有神马办法优雅一点呢?life is short. 鉴于控件有name属性,通过dir( ...
-
centos 7 中 tomcat 安装
一. 安装 jdk [root@iZm5ei4m ~]# /usr/local/tomcat/bin/startup.sh 一.安装 jdk 二.设置环境变量 #################### ...
-
筛选DataTable数据的方法
对DataTable进行过滤筛选的一些方法Select,dataview 当你从数据库里取出一些数据,然后要对数据进行整合,你很容易就会想到: DataTable dt = new DataTable ...
-
poj 3378 二维树状数组
思路:直接用long long 保存会WA.用下高精度加法就行了. #include<map> #include<set> #include<cmath> #inc ...
-
VBS基础篇 - 循环语句(4) - For Each...Next
VBS基础篇 - 循环语句(4) - For Each...Next For Each...Next 循环与 For...Next 循环类似.For Each...Next 不是将语句运行指定的次 ...
-
Natural Merge Sort(自然归并排序)
This is a Natural Merge Sort program from my textbook. It works, but I don't think it's good. // Nat ...
-
vue 路由懒加载 使用,优化对比
vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...
-
Future、Callable 、FutureTask详解
1.Future和Callable Future是一个接口表示异步计算的结果,它提供了检查计算是否完成的方法,以等待计算的完成,并获取计算的结果.Future提供了get().cancel().isC ...
-
使用apktool.jar工具反编译和回编译Android APK 终端命令模式
1.工具准备 工具可以网上搜索下载新版本,也可以从这里Download:https://github.com/FlymeOS/tools/blob/lollipop-5.1/reverses/apkt ...
-
Java泛型:List<;?>;与List的区别
为什么说List<?>是type-safe而List不是type-safe的? 1.List<?> compiler看到了你使用了wildcard ?,那么相当于你对compi ...