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 相关文章推荐
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
node.js实现端口转发
Apr 14 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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中的switch语句的用法实例详解
2015/10/21 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
jQuery 使用个人心得
2009/02/26 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
JavaScript 继承详解 第一篇
2009/08/30 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
python append、extend与insert的区别
2016/10/13 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
台湾旅游网站:灿星旅游
2018/10/11 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
后勤人员岗位职责
2013/12/17 职场文书
战友聚会邀请函
2014/01/18 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
说明书范文
2014/05/07 职场文书
机关党员公开承诺书
2014/08/30 职场文书
出纳岗位职责
2015/01/31 职场文书
贫困证明怎么写
2015/06/16 职场文书
教学反思怎么写
2016/02/24 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL