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 select下拉框操作常用方法
Nov 09 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
js中文逗号转英文实现
Feb 11 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
js实现漫天星星效果
Jan 19 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
vuex state中的数组变化监听实例
Nov 06 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维护文件系统
2006/10/09 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
半角全角相互转换的js函数
2009/10/16 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
Django的信号机制详解
2017/05/05 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
python命令 -u参数用法解析
2019/10/24 Python
python实现取余操作的简单实例
2020/08/16 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
numpy实现RNN原理实现
2021/03/02 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
大学班长的职责
2014/01/27 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
给学校的建议书范文
2014/05/15 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
网络研修随笔感言
2015/11/18 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python
Java使用HttpClient实现文件下载
2022/08/14 Java/Android