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 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
js indexOf()定义和用法
Oct 21 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
如何选择适合你的JavaScript框架
Nov 20 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
PHP自动补全表单的两种方法
2017/03/06 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python写的Socks5协议代理服务器
2014/08/06 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
python实现二叉查找树实例代码
2018/02/08 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
传播学毕业生求职信
2013/10/11 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
施工工地安全标语
2014/06/07 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android