问题:做一个带拖动的弹出层效果(像提示框那种) 先写了一半,明天继续奋斗: javascript 弹出层居中效果的制作 * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:300px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; } a.btn { display:block; width:80px; cursor:pointer; background-color:#f7...
代码如下:// JavaScript Document var dv; var dvMsg; function customalert() { dvMsg = document.createElement("div"); dvMsg.style.position = "absolute"; dvMsg.setAttribute(id, msg); dvMsg.style.width = "600px"; dvMsg.style.padding = "10 0 2 0"; dvMsg.style.height = "313px"; dvMsg.style.background = "#EF621D"; dvMsg.style.border = "1px solid #6699dd"; dvMsg.style.zIndex = "1112"; document.body.appendC...
浮动层居中的对话框效果演示 浮动层居中的对话框效果演示 HTML { HEIGHT: 100% } BODY { HEIGHT: 100% } BODY { FONT-SIZE: 14px; FONT-FAMILY: Tahoma, Verdana, sans-serif } DIV.neat-dialog-cont { Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0% 0%; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100% } DIV.neat-dialog-bg { Z-INDEX: -1; FILTER: alpha(opacity=70); LEFT: ...
经过分析,网上的参考,终于搞定了~~ 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=$("#...
说到js的面向对象,就不得不提到prototype这个js内置属性了(注意:这里的prototype可不是prototype.js),它的作用就是可以动态的向一个对象(object)添加某种属性。我现在要做的就是尽可能的让代码达到公用,像继承啦之类的。好了,这些就不多说了,对prototype不了解的可以搜索下相关内容。 今天要做的是点击一个html元素让其弹出一个友好的对话框来,首先要明确两点,一点是我可能会大量的用到这种方式,甚至不希望出现系统的alert...
基于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("...
#flyout { border: solid 2px Gray; background-color: #FFF999; width: 300px; height: 100px; display: none; } var flyoutTimer; function mouseOutEvent() { //Hide flyout after 1 second when the mouse move out of the flyout zone flyoutTimer = setTimeout(hideFlyout, 1000); } function mouseOverEvent() { //Clear the timer when the mouse move over the flyout clearTimeout(flyoutTimer); } func...
如题,本文将使用纯粹的脚本JavaScript实现渐变的弹出层,其想法也非常简单:利用IFrame实现遮盖,再借助一个DIV用于展现弹出层的内容,最后再使用其内置函数setInterval()和clearInterval()实现渐变,原理非常简单,只不过要注意对DOM对象/元素的精确控制。由于代码比较简单,在此就不再赘述。以下代码在IE6+,FF3.5+测试通过。 脚本Flyout.js: 代码如下: // JScript File if (navigator.userAgent.toLowerCase().indexOf(msie) >...
效果图:MC Dialog 功能特点 1.支持键盘操作(esc关闭,enter执行当前获得焦点按钮的事件,屏蔽了ctrl键盘,屏蔽了tab键真正实现了一个模拟浏览器自带对话框的功能) 2.支持焦点智能移动(当焦点移出层外时,自动将焦点移回层或者有按钮则移到按钮上,保证焦点始终在层上,确保快捷键操作正确) 3.智能闪烁提示功能(当焦点移出层外部,比如你在层外点击了,则层会闪烁提示你必须在当前层操作,这里完美模拟了浏览器自带对话框的操作) 4....
点击页面上的按纽,弹出一个层,背景变灰 点击页面上的按纽,弹出一个层,背景变灰 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=...
本文实例讲述了JS实现响应鼠标点击动画渐变弹出层效果。分享给大家供大家参考,具体如下:动画弹出层.list{position:relative;;background:#eee;border:1px #ccc solid;margin:10px;height:30px;width:100px;cursor :pointer ; } .listShow{position:relative;background:#eff;border:1px #ddd solid;margin:10px;height:30px;width:100px;cursor :pointer ; } .comment{position:absolute;left:0;display:none;position:absolute;...
前段时间做项目,有个功能是消息提醒。 我相信很多大牛都做过。下面来分享我遇到的问题和解决方案。首先我们的项目是用frameset框架,main代码。这样分了左右两个部分。要求是无论在哪个页面当点击消息图标的时候。能再右下角弹出消息提示。这个我还真没做过。当时查阅了很多的资料。然后先是找到了jquery的message插件。后来又找到了如何操作父框架的js,然后这个问题就解决了。因为我left.jsp是菜单导航。它是不变的。所以我就把消...
原理很简单,通过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...