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中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
vue配置多页面的实现方法
May 22 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 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教程 预定义变量
2009/10/23 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
简单介绍Python中的try和finally和with方法
2015/05/05 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python3 操作符重载方法示例
2017/11/23 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
导致python中import错误的原因是什么
2020/07/01 Python
白色公司:The White Company
2017/10/11 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
演讲稿的写法
2014/05/19 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
速龙x4-860k处理器相当于i几
2022/04/20 数码科技