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 相关文章推荐
js跑马灯代码(自写)
Apr 17 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
深入解析ES6中的promise
Nov 08 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
vue通过过滤器实现数据格式化
Jul 20 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统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Swift中的协议(protocol)学习教程
2016/07/08 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
专营店会计助理岗位职责
2013/11/29 职场文书
农村葬礼主持词
2014/03/31 职场文书
法律专业求职信
2014/05/24 职场文书
质量提升方案
2014/06/16 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
如何在Python中妥善使用进度条详解
2022/04/05 Python