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 写类方式之四
Jul 05 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
Element InputNumber 计数器的实现示例
Aug 03 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
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 session 预定义数组
2009/03/16 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
简单JS代码压缩器
2006/10/12 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
Vue 实现拨打电话操作
2020/11/16 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
python实现KNN分类算法
2019/10/16 Python
python多进程重复加载的解决方式
2019/12/13 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Python的信号库Blinker用法详解
2020/12/31 Python
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
小学庆六一活动方案
2014/02/28 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
律师函格式范本
2015/05/27 职场文书
五年级作文之想象作文
2019/10/30 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python
浅谈Redis缓冲区机制
2022/06/05 Redis
Android实现图片九宫格
2022/06/28 Java/Android