JQuery弹出炫丽对话框的同时让背景变灰色


Posted in Javascript onMay 22, 2014

这段时间在做开发时,用到了JQuery弹出炫丽对话框,背景变灰色。特地和大家分享分享。

先看效果图:
JQuery弹出炫丽对话框的同时让背景变灰色 
代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="js/jquery-1.9.1.js"></script> 
<script src="js/jquery-ui.js"></script> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"> 
<title>JQuery弹出框,背景变灰色</title> 
<script type="text/javascript"> 
$(document).ready(function(e) { 
$( "#reviews" ).bind('click',function(event) { 
$( "#checkandPass" ).dialog({ 
autoOpen: true, 
width: 765 , 
show: "blind", 
hide: "explode", 
modal: true,//设置背景灰的 
}); 
$( "#checkandPass" ).dialog( "open" ); 
return true; 
}); 
}); 
</script> 
</head> <body> 
<div> 
<input type="button"id="reviews"value="Click me"/> 
</div> 
<div id="checkandPass" title="审核意见" style="display: none;"> 
<form id="passideas_true" method="post" enctype="multipart/form-data" > 
<div> 
<textarea style="width:100%;height:90%;min-height: 100px;"></textarea> 
</div> 
<div style="margin-top: 20px;text-align: center;"> 
<button style="height:30px;width:80px;" type="button" id="upfpass_true" >确定</button> 
<button style="height:30px;width:80px;" id="sb">取消</button> 
</div> 
</form> 
</div> 
</body> 
</html>

保证是你要的效果。
Javascript 相关文章推荐
JavaScript中SQL语句的应用实现
May 04 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
聊聊JS ES6中的解构
Apr 29 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 #Javascript
浅谈JavaScript字符集
May 22 #Javascript
对new functionName()定义一个函数的理解
May 22 #Javascript
教你如何使用PHP输出中文JSON字符串
May 22 #Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 #Javascript
JS常用表单验证方法总结
May 22 #Javascript
一个Action如何调用两个不同的方法
May 22 #Javascript
You might like
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
php Hex RGB颜色值互换的使用
2013/05/10 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
java必学必会之static关键字
2015/12/03 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
python 性能提升的几种方法
2016/07/15 Python
python和ruby,我选谁?
2017/09/13 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Django密码系统实现过程详解
2019/07/19 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
公司培训心得体会
2014/01/03 职场文书
运动会邀请函范文
2014/01/31 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis