页面比较丑，只把功能实现了。^ ^ 代码如下: 模仿easyui dialog的效果 //取得页面元素 var getElement = function() { return document.getElementById(arguments[0]) || false; } function openDialog(dialogId) { var maskId = "mask"; //如果有，先删除原来的 if (getElement(dialogId)) { document.removeChild(getElement(dialogId));//删除操作：弹出的div } if (getElement(maskId)) { document.removeChild(getElement(m...
iDrag & iDialog 介绍特点：iDialog.js依赖于jquery编写的简单易用的对话框，同时还可以通过添加css3，改变对话框的展现动画。提供了两个方法： ?1、拖拽函数 iDrag() 或 $.drag();?2、对话框函数 iDialog() 或 $.dialog(); 跨平台兼容:兼容：IE6+、Firefox、Chrome等主流浏览器(其它暂时没条件测试)。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件。 渐进增强的体验:确保IE家族功能完善的前提下，现代浏览器适当的...
实例如下所示： 代码如下: Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击 $(document).ready(function () { var ps = $("#div_pro").position(); $("#float_box").css("position", "absolute"); $("#float_box").css("left", ps.left + 20); //距离左边距 $("#float_box").css("top", ps.top + 20); //距离上边距 $("#div_pro").mouse...
代码如下:网页特效-窗口特效-弹出窗口后网页背景变暗的效果与之间.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}.white_content{display:none;position:absolute;top:25%;left:25%;width:50%;height:50%;padding:16px;border:3px solid orange;background-color:white;z-index:1002;overflo...
代码如下: function doThis() { var a = document.getElementById("addYear"); a.style.left=(document.body.clientWidth/2-a.clientWidth/2)+"px"; a.style.top=(document.body.scrollTop+document.body.clientHeight/2-a.clientHeight/2)+"px"; }
弹出层在实际应用中我们经常会碰到大量的弹出层效果，下面我来做一个基于jquery的简单的弹出层效果实例，各位朋友有兴趣可参考。 效果代码如下： 在 弹出层 中下面是核心代码 代码如下:// 渐变弹出层$(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定事件处理 event.stopPropagation(); var offset = $(event.target).offset();//取消事件冒泡 $("#racePop").css({ top:of...
jquery实现弹出层完美居中效果 代码如下:showDiv($("#pop"));function showDiv(obj){ $(obj).show(); center(obj); $(window).scroll(function(){ center(obj); }); $(window).resize(function(){ center(obj); }); } function center(obj){ var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $(obj).height(); var popupWidth =...
代码如下:";var content4 = "高级搜索"; T$(click_test4).onclick = function() { //其中click_test4是上面的按钮id //content4为要显示的div上面的内容 TINY.box.show(content4, 0, 350, 250, 0); };另外支持的js文件下载地址：点击下载
代码如下: js登录弹出层 登录框特效 body{background-color: #fff;} html, body{height: 100%;} html body{font: 12px Arial, Helvetica, sans-serif;color: #333333} html>body{font: 12px Arial, Helvetica, sans-serif;color: #333333} #TB_overlay{position: absolute;top: 0;left: 0;z-index: 100;width: 100%;height: 100%;background-color: #CCC;filter: alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;} #TB_w...
代码演示： http://www.imqing.com/demo/movediv.html 大概原理： 使div的position为绝对定位absolute，然后控制其top与left值，需要监听鼠标事件，主要用到mousedown, mousemove, mouseup。 在mousedown后，记录mousedown时鼠标与需要移动的div的位置，然后取得两者之差，得到在鼠标移动后，div的位置。即： left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值) top = 当前鼠标位置.y - (鼠标点击时的.y值 - div的初始...
代码如下: New Document //创建一个弹出层,title 标题，width 宽度，height 高度，content 内容，url 如果url不为空时则覆盖content加载url页面中的内容 function CreatePopLayerDiv(title,width,height,content,url){ var titles = title || "标题"; var Iheight=$(window).height(); var Iwidth =$(window).width(); var heights = height || 300; var widths = width || 500; var Oheight= (Iheight -heights) / 2; var...
代码如下: New Document * { padding:0px; margin:0px; } #Idiv { width:900px; height:auto; position:absolute; z-index:1000; border:2px solid #ffffff; background:#ffffff; } 点击关闭层 document.documentElement 的区别document.documentElement 的区别 点击打开弹出层！ function show() { var Idiv=document.getElementById("Idiv"); Idiv.style.display="block"; //以下部分要将弹出层居中显示 Idiv....
1、创建一个jsp页面，内容如下，js和css根据自己的实际情况而定 代码如下: pageEncoding="UTF-8"%> Insert title here 用户管理 添加 , 添加 姓名： onfocus="this.className='input220L';this.onmouseout=''" onblur="this.className='input220';this.onmouseout=function(){this.className='input220'};" onmousemove="this.className='input220Lg'" onmouseout="this.className='input220'"> * 昵称： o...
代码如下: 无标题文档 /*弹出层的STYLE*/ html,body {height:100%; margin:0px; font-size:12px;} .mydiv { background-color: #ff6; border: 1px solid #f90; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index:99; width: 300px; height: 120px; left:50%;/*FF IE7*/ top: 50%;/*FF IE7*/ margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */ margin-top:-60px!important;/*F...
本屌丝最近工作要求重写网站所有代码，so...极其蛋疼的事情出现了，管我的人要求不能用网上的插件，oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能： 需求：网页遮罩层/弹出层，兼容IE6 幸好本屌丝以前聪明收集了个js的版本，so，自己改写成了jQuery插件形式的，方便以后使用。 屁话不多放，无码无真相！ 代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.0 ...