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 相关文章推荐
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
小程序外卖订单界面的示例代码
Dec 30 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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php4与php5的区别小结(配置异同)
2011/12/20 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
Using the TextRange Object
2006/10/14 Javascript
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
动态创建类实例代码
2009/10/07 Python
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python实现排序算法
2014/02/14 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
解读python如何实现决策树算法
2018/10/11 Python
numpy.where() 用法详解
2019/05/27 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
房屋买卖协议书
2014/04/10 职场文书
安全目标管理责任书
2014/07/25 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
小学生表扬稿范文
2015/05/05 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
城南旧事观后感
2015/06/11 职场文书