在之前做项目的时候经常会在主页面上点击某个按钮，右侧弹出一个div输出对应内容的详细信息。此时，我是希望在鼠标点击弹出层外的时候关闭该弹出层，主要思想就是：找到鼠标点击的那个元素判断这个元素是否在指定区域内，其实就是判断它的父元素是不是弹出层如果不是就对弹出层进行hide，如果是就不进行任何操作具体实现该代码需要使用jQuery,代码如下：$(document).mousedown(function(e){ if($(e.target).parent("#info").length...
.THICKBOX支持一下浏览器: Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10……但是据我的使用,IE6还是有点问题的!下面我们首先来看它的调用: 1.肯定你先要下载jquery.js和thickbox.js了.还有thickbox.css也不能少! 代码如下: //path-to-file 就是你放这三个文件的路径 2.弹出单张图片的方法: 代码如下: 3.多张图片实现分页也...
这个简化版不能在别的框架弹出层的，所以也就没有了那个cssurl属性了，也没有target 属性了 代码如下:String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,"gm"),s2); }; (function($){ /* * $-layer 0.1 - New Wave Javascript * * Copyright (c) 2008 King Wong * $Date: 2008-10-09 $ */ var ___id___ = ""; var ___settings___ = {}; var isMouseDown = false; var currentElemen...
代码如下:String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,"gm"),s2); }; (function($){ /* * $-layer 0.1 - New Wave Javascript * * Copyright (c) 2008 King Wong * $Date: 2008-10-09 $ */ var ___id___ = ""; var ___settings___ = {}; var isMouseDown = false; var currentElement = null; var dropCallbacks = {}; var dragCallbacks = {}; var bubblings = {}; var lastMouseX;...
经过分析，网上的参考，终于搞定了~~ jQuery插件代码： 代码如下: jQuery.fn.selectItem = function(targetId) { var _seft = this; var targetId = $(targetId); this.toggle( function() { var A_top = $(this).offset().top + $(this).outerHeight(true); // 1 var A_left = $(this).offset().left; targetId.bgiframe(); targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" }); } , ...
直接看代码： 代码如下: $(document).ready(function() { $("#button").click(function() { var layer = $('none').layer({ content: '这里是层内容，默认焦点可以用none对象来代替' }); layer.open(); }); }); 代码如下:/* * 作者：彭白洋 2009.10.24* 功能：可弹出自定义字符串、Dom对象，根据事件焦点弹出、关闭动画* 调用方法：* 1、初始化直接打开：$("#buttonID").layer().open()；* 2、初始化：var layer=$("#...
基于jquery的锁定弹出层 这个东西也是随手总结出来的，引用了一些js框架jquery的方法。 div遮盖其他控件的方法参考了 对于需要遮盖flash的，请将flash控件的WMode变量值设置为Transparent 使用方法： 代码如下: //配置模块 var moduleEvent = [{"idName":"close" , "eventName":"click" , "doMethod":"CLOSE_DIV"},{"idObj":window,"eventName":"resize" , "doMethod":"RESIZE_WINDOW"}]; qihoo_effect_maskDiv.showMaskDiv("...
【一】需求如下： 1：注册不新开页面，改成弹出层， 2：新增用户买房欲望调查， 3：用户名自动检索出推荐的用户名， 4：出生日期用户输入改成控件选择。 5：尽力提高用户体验，吸引用户注册。 【二】无图无真相。 1：简化后的页面：2：浮出文字提示和圆角边框：3：支持民意调查（异步提交）4：自动检索推荐用户名（测试数据）5：数据有效性验证6：日历7：支持拖拽8：滑入显示9：over【三】代码分析1.弹出层的制作， a.先引用这三个...
原理很简单，通过JS动态构建一个div层，将其插入到body中，然后通过调整position的CSS属性为absolute或fixed，使其脱离原来的文档流的位置。再通过适当的加工美化就成了。 代码如下: 标题 [关闭] 内容部分 这就是两个div层的结构，第一个背景遮盖层只有在需要的时候才创建。每个div都定义了一个CSS类，这样便于自定义其外观。 一些基本功能的实现 移动框体 只要在mousemove事件中，计算两次移动鼠标位置的差值，再加上被移...
代码如下: /* 弹出窗口定位到浏览器中间 1. show(options{ height:高度 width:宽度 speed:渐显时间 默认0 container:包含的html内容的jquery对象 model:是否是模态窗口，默认true，模态对话框就是在弹层下面在覆盖遮罩层，参考上篇文章Overlay实现 }) 2. close(speed:淡出时间 默认0) */ Q.Panel = function() { var self = this; self._resetPosition = function() { self._container.css("top", self._getTop()); self._containe...
我们使用热门的jquery进行设计，同时我们选择效果比较优秀的boxy弹出插件进行扩展(关于boxy的相关资料，请参照张鑫旭博客http://www.zhangxinxu.com/wordpress/?p=318)。下面介绍boxy作为选择器框架的应用。 对于选择器，相信用过招聘网站的人都不会陌生(就是那个点击就弹出的，选择行业、职位和地区的东西)，选择器难点就在于样式调试，主要针对的是IE6。这里介绍行业、职位和地区选择器，下载的Demo包含这三个选择器。 行...
使用该jQuery插件 要想使用该jQuery插件，需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector"，例如："a[rel=boxy],form.with-confirmation"。这会给匹配的元素附加一些行为，如下： 一个href属性中如果锚点包含#，则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中。 如果href锚点内容为其他一些东西，则会试图使用Ajax载入其对应的内容。理想情况下，我们有相同的起源检查和...
blockui可以在你发送ajax请求的时候，显示一个遮罩层禁止用户对页面进行操作并显示提示信息；或者用来显示一个登陆窗口，也可用来显示图片等。 blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏，可以在blockUI方法中指定一些参数，来控制弹出层显示的内容，大小，位置等。blockUI方法的常用的参数有：message,css,overlayCSS,showOverlay。 message：主要用来设置要显示的内容，可以直接设置为一...
4.1、手动创建实例 代码如下: $(function() { $("#a1").click(function() { //实例化一个Boxy对象 var box1 = new Boxy("这个参数是显示的内容" //显示内容 , { title: "标题", //对话框标题 modal: false, //是否为模式窗口 afterHide: function(e) { alert("dialog hide"); }, //隐藏时的回调函数 afterShow: function(e) { alert("dialog show"); }, //显示时的回调函数 closeText: "X", //关闭功能按钮的标题文字 draggable:...
1、下载并修改插件 可以在官网上下载到最新版(http://plugins.jquery.com/files/boxy-0.1.4.zip)，到我写这些文字的时候最新版为0.1.4版，下载解压后有1个主要的js文件：jquery.boxy.js;1个css文件;还有4个图片用于构成弹出层的4个圆角。将文件引入系统中，修改boxy.css，将下面的图片路径修改为项目中实际的位置，如果设置不对会引起图片失效，那时就难看了。 代码如下: /* 将此处的图片修改为相对于css文件的图片文件的路径 */ ...