代码如下: // /* author: hongru.chen ** date: 2010-09-15 ** vision: 1.1 */ var Hongru = {}; function $(id){return document.getElementById(id)} Object.prototype.extend = function(target, /*optional*/source, /*optional*/deep) { target = target || {}; var sType = typeof source, i = 1, options; if( sType === 'undefined' || sType === 'boolean' ) { deep = sType === 'boolean' ? source : false; source = ta...
在仿Lightbox效果中，已经基本实现了这个效果，这次主要改进了ie6在fixed时的抖动问题。 此外，还增加了一个用来兼容ie6的fixed的方法，覆盖层也重新“包装”，程序也改成组件的结构。 兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0 效果预览 http://demo.jb51.net/js/AlertBox/index.htm 程序说明 【实现原理】 弹出层的基本原理在仿Lightbox效果中已经说的差不多了。关键的地方就是定位，一般相对文档的定...
我们使用热门的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载入其对应的内容。理想情况下，我们有相同的起源检查和...
一.摘要 本系列文章是为了抽象通用的,跨浏览器的脚本方法. 本篇文章讲解弹出浮动层的javascript函数, 以及函数的原理和使用注意事项. 二.实现效果 用脚本弹出浮动层是我们最常用的脚本方法之一.下面是效果图: 点击图中的"航空公司"后,会在"航空公司"下面弹出浮动层. 在网上弹出框的脚本相当多, 而且还有各种第三方JS框架可供我们使用.但是其中有的脚本过于简单,仅仅粗略的实现弹出效果而忽略了灵活性,通用性和跨浏览器特性. 使用JS...
blockui可以在你发送ajax请求的时候，显示一个遮罩层禁止用户对页面进行操作并显示提示信息；或者用来显示一个登陆窗口，也可用来显示图片等。 blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏，可以在blockUI方法中指定一些参数，来控制弹出层显示的内容，大小，位置等。blockUI方法的常用的参数有：message,css,overlayCSS,showOverlay。 message：主要用来设置要显示的内容，可以直接设置为一...
弹出层并可拖拽 html,body{height:100%;overflow:hidden;} body,div,h2{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} center{padding-top:10px;} button{cursor:pointer;} #overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;} #win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid...
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文件的图片文件的路径 */ ...
最终效果： 代码如下: 弹出层插件:jquery.artwl.thickbox.js /* File Created: 三月 1, 2012 Author:artwl */ ;(function ($) { $.extend({ artwl_bind: function (options) { options=$.extend({ showbtnid:"", title:"", content:"" },options); var mask = ''; var boxcontain = '\ \ \ \ \ Title\ \ \ Content\ \ \ '; var cssCode = 'html, body, h1, h2, h3, h4, h5{margin: 0px;padding: 0px;}\ #artwl_mask{backgro...
代码如下： 代码如下: (function ($) { var imgdir = images/;//图片文件夹路径 var autoHide=false;//悬浮div是否自动隐藏 var hideType=hide;//隐藏的方式 可选参数 hide、slide、fade var hideDelay=0;//悬浮div隐藏过程使用的时间 var hideTime=0;//悬浮div延迟隐藏时间 var zIndex=100;//多个div时获取焦点的div处于顶层 var showType=show;//悬浮div显示方式 可选参数 hide、slide、fade var showTime=0;//悬浮div显示过程使...
代码如下: 一个弹出层并锁屏效果 测试测试测试测试测试测试测试 测试测试测试测试测试测试测试 function sAlert(str) { var msgw,msgh,bordercolor; msgw=400;//提示窗口的宽度 msgh=100;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor="#336699";//提示窗口的边框颜色 titlecolor="#99CCFF";//提示窗口的标题颜色 var sWidth,sHeight; sWidth=document.body.offsetWidth;//获取窗口宽度 sHeight=sc...
代码如下: 超漂亮的仿腾讯弹出层效果 body {background: #ffffff; color: #444;} a{color: #09d; text-decoration: none;border: 0;background-color: transparent;} body,div,q,iframe,form,h5{margin: 0;padding: 0;} img,fieldset { border: none 0; } body,td,textarea {word-break: break-all;word-wrap: break-word; line-height:1.5;} body,input,textarea,select,button { margin: 0; font-size: 12px; font-family:...
弹出层永远是一个前端必须搞定的东西，一般情况下，如果弹出层有固定的高和宽，用样式即可搞定，但是如果碰到没有固定高或者固定宽或者固定高和宽的时候，我们就需要用JS去处理，去动态获取当前窗口高或者宽；今天弄了2种情况，一个是相对于屏幕窗体，一个是相对于当前的窗口，看代码，或许对你有用： 代码如下: 无标题文档 body{margin:0px;padding:0px} #div1{background:#F00;color: #FFF; display:none;position:absolut...
此Jquery插件是一款非常实用的特效，是很多网站不可缺少的推广神兵利器，传统的一般都用百度、加网的分享插件，但样式外观都不怎么好看，用户体验效果差一点，此作品不但有分享功能，还具备了动画效果，提高了用户体验。由于用了CSS3，为了可以看到插件的最佳效果，建议大家使用谷歌、火狐等浏览器。。。作品包括以下功能： 1、弹出层 2、遮罩层 3、动画效果 4、CSS3 效果如下： 源码下载 代码片段(1) 代码如下: $(document).read...