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的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
js实现3D旋转相册
Aug 02 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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实现八皇后算法
2019/05/06 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
浅谈Python基础—判断和循环
2019/03/22 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
Pycharm github配置实现过程图解
2020/10/13 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
AC Lens:购买隐形眼镜
2017/02/26 全球购物
学生手册家长评语
2014/02/10 职场文书
读书活动实施方案
2014/03/10 职场文书
社区平安建设方案
2014/05/25 职场文书
老干部工作先进事迹
2014/08/17 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
继承权公证书范本
2015/01/23 职场文书
护士年终个人总结
2015/02/13 职场文书