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.addClass始终无效原因分析
Sep 08 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
详解jQuery-each()方法
Mar 13 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连接access数据库
2015/03/27 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
uploadify 3.0 详细使用说明
2012/06/18 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
node.js超时timeout详解
2014/11/26 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
python匿名函数的使用方法解析
2019/10/10 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
python设置表格边框的具体方法
2020/07/17 Python
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
一道Delphi上机题
2012/06/04 面试题
服装设计专业毕业生推荐信
2013/11/09 职场文书
依法行政工作汇报
2014/10/28 职场文书
围城读书笔记
2015/06/26 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
七年级作文之雪景
2019/11/18 职场文书