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无法执行的解决办法
Feb 25 Javascript
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
angular共享依赖的解决方案分享
Oct 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中$_FILES的使用以及注意事项
2013/07/05 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
Python自动发邮件脚本
2017/03/31 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
python使用thrift教程的方法示例
2019/03/21 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
pytorch构建多模型实例
2020/01/15 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
基于python图像处理API的使用示例
2020/04/03 Python
Pandas的Apply函数具体使用
2020/07/21 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
高中自我鉴定
2013/12/20 职场文书
交通事故检查书范文
2014/01/30 职场文书
软件项目实施计划书
2014/05/02 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
2014年银行员工工作总结
2014/11/12 职场文书