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 相关文章推荐
图片之间的切换
Jun 26 Javascript
JavaScript的parseInt 进制问题
May 07 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
详解angular element()方法使用
Apr 08 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 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
php 函数使用方法与函数定义方法
2010/05/09 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP连接access数据库
2015/03/27 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
python Celery定时任务的示例
2018/03/13 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
Python实现异步IO的示例
2020/11/05 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
高中竞选班长演讲稿
2014/04/24 职场文书
产品发布会策划方案
2014/05/12 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
单位租房协议范本
2014/12/03 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
给老师的一封感谢信
2015/01/20 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers