JQuery弹出炫丽对话框的同时让背景变灰色

2014-07-11  来源:本站原创  分类:jquery  人气:1 

这篇文章主要介绍JQuery实现弹出炫丽对话框的同时让背景变灰色效果,需要的朋友可以参考下

这段时间在做开发时,用到了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>

保证是你要的效果。

相关文章
  • JQuery弹出炫丽对话框的同时让背景变灰色 2014-07-11

    这篇文章主要介绍JQuery实现弹出炫丽对话框的同时让背景变灰色效果,需要的朋友可以参考下 这段时间在做开发时,用到了JQuery弹出炫丽对话框,背景变灰色.特地和大家分享分享. 先看效果图: 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=u

  • Jquery弹出层插件ThickBox的使用方法 2013-10-02

    这篇文章主要介绍了Jquery弹出层插件ThickBox的使用方法,需要的朋友可以参考下 thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它的几种用法. 声明一下:这只是个人的总结记载而已. 准备工作:你需要三个文件:thickbox.js.thickbox.css.jquery.js,网上到处可下 具体使用: 第一步:将这三个文件引入到你要使用thickbox的页面 <script type="text/javascript&q

  • 原创jQuery弹出层插件分享 2015-01-22

    我们在前端开发,经常要用到弹出层的效果,以前很早前就想将这个功能整理成一个公共的接口来实现了:自写的第一个jQuery插件,这里分享给大家,有需要的小伙伴参考下. 依赖jquery,兼容IE6\7\8 火狐 chrom 等主流浏览器(绝对原创), 不过请求大神帮我提升点效率. /** * jQuery弹出层插件 * * @author [email protected] * @since 2014-08-23 */ (function($) { var methods = { o : { isI

  • 网页弹出式对话框 Lightbox JS 2008-12-16

    Lightbox JS 网站 : http://huddletogether.com/projects/lightbox/ Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本.就是一个页面上的弹出式对话框的组件, 它能被快速安装并且运作于所有流行的浏览器. 使用方法: <script type="text/javascript" src="lightbox.js"></script> <a href="

  • jquery弹出关闭遮罩层实例 2013-12-17

    这篇文章介绍了jquery弹出关闭遮罩层实例,有需要的朋友可以参考一下 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • jquery 弹出层注册页面等(asp.net后台) 2014-03-04

    jquery 弹出层注册页面,尽力提高用户体验,吸引用户注册. [一]需求如下: 1:注册不新开页面,改成弹出层, 2:新增用户买房欲望调查, 3:用户名自动检索出推荐的用户名, 4:出生日期用户输入改成控件选择. 5:尽力提高用户体验,吸引用户注册. [二]无图无真相. 1:简化后的页面: 2:浮出文字提示和圆角边框: 3:支持民意调查(异步提交) 4:自动检索推荐用户名(测试数据) 5:数据有效性验证 6:日历 7:支持拖拽 8:滑入显示 9:over [三]代码分析 1.弹出层的制作, a

  • C#实现在前端网页弹出警告对话框(alert)的方法 2014-03-14

    这篇文章主要介绍了C#实现在前端网页弹出警告对话框(alert)的方法,涉及C#通过自定义函数调用window.alert方法弹出对话框的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了C#实现在前端网页弹出警告对话框(alert)的方法.分享给大家供大家参考.具体如下: 通常我们通过JS生成警告对话框,下面的代码可以帮助你在点击runat=server的按钮时从服务器端生成alert警告对话框 private void MessaegBox(String msg) { Page

  • js弹出模式对话框,并接收回传值的方法 2014-05-06

    js弹出模式对话框,并接收回传值的方法,需要的朋友可以参考一下 弹出对话框的页面A: <script type="text/javascript"> function openDialog(){ paramers="dialogWidth:500px; dialogHeight:300px; status:no"; workerId = window.showModalDialog("userList.aspx","&quo

  • jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件 2014-05-14

    jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件,需要的朋友可以参考下 最终效果: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>弹出层插件:jquery.artwl.thickbox.js</t

  • JavaScript写的一个自定义弹出式对话框代码 2014-05-15

    最近闲来无事,用js自己做了一个弹出式对话框,需要应用弹出式对话框的朋友可以参考下. 下图是我的设计思路 下面是具体的js代码 1,首先定义几个自定义函数 代码 //判断是否为数组 function isArray(v) { return v && typeof v.length == 'number' && typeof v.splice == 'function'; } //创建元素 function createEle(tagName) { return docume

  • JavaScript写的一个DIV 弹出网页对话框 2014-07-15

    自己整理得一个JavaScript写的一个DIV 弹出网页对话框 网上搜索到的代码,做了一些修改该, 修正无法自定义颜色,修正IE8 下错误,以及其他小BUG 兼容IE6~8以及火狐 可以自定义 // 提示窗口标题高度 // 提示窗口的边框颜色 // 提示窗口的标题颜色 // 提示窗口的标题背景色 // 提示内容的背景色 // 提示内容文字对齐方式 功能 可以弹出一个大DIV遮住页面(IE下 透明) 然后在屏幕中央显示显示一个小DIV 可用作功能提示 操作提示 以及公告等 提示内容可以使带HTM

  • jQuery弹出(alert)select选择的值 2014-08-27

    利用jQuery弹出select选择的值,当单击按钮的时候就会执行的一个方法,它的作用就是alert select值 <script src="jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { $('#btn').click(function () { alert($('#s option:selected').val()); })

  • jquery 弹出公告功能代码 2014-10-08

    jquery 弹出公告功能代码,可以关闭,有过度的关闭与打开. jquery 弹出公告 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • jQuery弹出窗口完整代码(居中,居左,居右) 2014-10-19

    jQuery弹出窗口完整代码,可以实现窗口居中,居左,居右显示,比较不错,需要的朋友可以参考下 核心代码: //获取窗口的高度 var windowHeight; //获取窗口的宽度 var windowWidth; //获取弹窗的宽度 var popWidth; //获取弹窗高度 var popHeight; function init(){ windowHeight=$(window).height(); windowWidth=$(window).width(); popHeight=$(

  • jQuery弹出框代码封装DialogHelper 2015-02-08

    这篇文章主要介绍了jQuery弹出框代码封装DialogHelper的方法,需要的朋友可以参考下 看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙.思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见. //require ScrollHelper.js f

  • asp.net GridView 删除时弹出确认对话框(包括内容提示) 2015-03-29

    GridView 删除时弹出确认对话框(包括内容提示) 效果图: html代码 <table align="center" bgcolor="#c0de98" border="0" cellpadding="0" cellspacing="1" width="99%"> <tr> <th colspan="2"> GridView演

  • jQuery弹出层插件大全 2011-02-21

    jQuery弹出层插件大全: 1.thickbox 目前用的比较多的,最新版本是thickbox3.1 下载地址: http://jquery.com/demo/thickbox/#examples 2.colorBox 官方网站:http://colorpowered.com/colorbox/ 下载地址:http://colorpowered.com/colorbox/colorbox.zip 演示实例:http://colorpowered.com/colorbox/core/exampl

  • Jquery弹出层笔记 2011-07-21

    index.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

  • boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器 2014-03-07

    当大家进行复杂功能设计的时候,在对多级联选择进行设计,为了获得更好的用户体验和节省页面空间,往往会使用弹出层的方法. 我们使用热门的jquery进行设计,同时我们选择效果比较优秀的boxy弹出插件进行扩展(关于boxy的相关资料,请参照张鑫旭博客http://www.zhangxinxu.com/wordpress/?p=318).下面介绍boxy作为选择器框架的应用. 对于选择器,相信用过招聘网站的人都不会陌生(就是那个点击就弹出的,选择行业.职位和地区的东西),选择器难点就在于样式调试,主要

  • jQuery弹出层插件Lightbox_me使用指南 2014-05-21

    在使用discuzx中有一个Message以及Dialog方法来显示信息对话框.今天写项目的时候,需要一个信息对话框,所以就着手利用lightbox_me插件来写一个做备用. 网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美.而在例如ie8一下的浏览器下显示不出应有的效果.例如jquery.avgrund插件在ie8下就无法显示. 本文介