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 相关文章推荐
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
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.ini中文版(1)
2006/10/09 PHP
PHP新手上路(十一)
2006/10/09 PHP
php自动获取关键字的方法
2015/01/06 PHP
php报错502badgateway解决方法
2019/10/11 PHP
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
python中的字典详细介绍
2014/09/18 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
Python decimal模块使用方法详解
2020/06/08 Python
keras:model.compile损失函数的用法
2020/07/01 Python
python zip()函数的使用示例
2020/09/23 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
python的dict判断key是否存在的方法
2020/12/09 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
简单说说tomcat的配置
2013/05/28 面试题
企业出纳岗位职责
2014/03/12 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
个人委托书范本
2014/04/02 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
Python PIL按比例裁剪图片
2022/05/11 Python