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 相关文章推荐
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
浅谈js中的闭包
Mar 16 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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
MySQL授权问题总结
2007/05/06 PHP
php 生成WML页面方法详解
2009/08/09 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
为超链接加上disabled后的故事
2010/12/10 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
python切换hosts文件代码示例
2013/12/31 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python实现随机选择元素功能
2017/09/14 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
python 修改本地网络配置的方法
2019/08/14 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
华为的Java面试题
2014/03/07 面试题
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
小学生母亲节演讲稿
2014/05/07 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
计算机教师工作总结
2015/08/13 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
导游词之江南周庄
2019/12/06 职场文书