Javascript可拖动的浮动模式窗口
jquery.jWindow.js 0.01
虽然JQuery有很多类似的插件，我也试过好多个，一直都没有找到一个适合自已的，总是感觉使用不能满足我的要求。
Javascript的浮动窗口已经是很老的应用，但网上很少有兼容性很好，使用又方便的功能，有的往往只是支持IE，而且问题多多，不方便应用到具体的项目中。最近我的项目里面又需要用到这个东西，以前自已都是直接写脚本来实现，但这次用到的地方比较多，所以只有写成一个插件的型式以方便多个地方调用。
这个我是在JQuery的框架上面开发的一个插件，已经完成常用的一些功能，后面慢慢加入一些实用的东西。
现在的功能有：
居中显示、
模式窗口、
弹出效果、
拖动功能
它主要是实现让一个区域浮动起来，并加入可拖动的功能。
这样的做法好处在于，你可以在哪个区域里面加入任何代码，最好的应用是配合iframe，比如跟我以前做的 AjaxUpload结合，效果很爽（这个我已经在我的项目里面使用）。
多的不说，看看代码和演示。
此插件必须配合
jquery.js 和
jquery.inteface.js 两个一起才可以使用。
Javascirpt调用方法：
$("#btnExampleAll").click(function(){
$("#panelWindowAll").jWindowOpen({
modal:true,
center:true,
drag : ".title",
close:"#panelWindowAll .close",
closeHoverClass:"hover",
transfererFrom:"#btnExampleAll",
transfererClass:"transferer"
});
});
HTML的窗口例子代码：
<div class="window " id="panelWindowAll">
<div class="title">jquery.jWindow Example 2</div>
<div class="content">
这个是浮动窗口的内容，你可以在这里放iframe或其它的HTML标签，使用方便. </div>
<div class="status"><span class="resize"></span></div>
</div>
具体的效果以及使用方法请看下面的地址
项目下载地址与演示地址：
http://www.wathon.com/opensource/js/jwindow/jwindow.html
源代码下载地址：
http://www.wathon.com/opensource/js/jwindow/jquery.jWindow.zip
关键词：
Javascript模式窗口 Javascript浮动窗口 JS浮动窗口 JS拖动窗口 JQuery窗口插件
posted on 2007-09-03 23:37
李华顺 阅读(5840)
评论(38) 编辑 收藏 所属分类:
Javascript & Ajax
发表评论
如果能做成qqzone或者msnspace能任意拖动到某个区域就好了
@kisskiki
这个界面基本是模仿QQ邮箱里面的哪个，不过实际的不是哪样，主要目的是为了方便自已使用，而不是为了做成像它哪样
@flyingchen
interface哪个用起来不方便，还有，居中的功能没有，模式窗口的功能没有，所以才做了这个
interface好像还是1.2的版本,与最新的jquery有点不兼容..
这个可以支持在弹出页面上操作吗 比如有链接或者保持能功能
@Spring.Cheung
关闭触发的功能已经想到了，正准备做
@高海东
没明白
@Spring.Cheung
返回值哪个没有必要的，因为这个不是一个提示框功能，而是实现浮动窗口，用来放一些东西，以提高用户体验。
这样的话，值的传递就可以简单地通过JS参数或变量来传递，我这里就没有必要做哪种功能了，意义不大。
@JerryChou
我做这个东西的原因就是因为用哪种方式的不能满足要求。
Baidu的popup.js 是提示窗口 正如 jquery的blockUI插件
而我这个是实现浮动窗口，窗口是需要放很多不同的东西，包括iframe
支持原处。
楼主精神可嘉。
顺便问一下，弹出窗口后，使主窗口背景颜色变淡且不可用是用的什么css特性？
@PerfmLin
你哪个我看过，感觉不适合自已，所以就新写一个
Hi, 有事想联系你，但是你的手机停机了哦。有别的联系方式吗？比如说qq或msn什么的。
@金色海洋（jyk）
呵呵，对群不感兴趣，只来它来挖人才
凡是做对话框的有一个问题很多人都没有注意到，就是本身页面很短未达到全屏，对话框弹出时背后的Mask层就会给界面带来一些问题。这个问题目前我见过的只有ComponentArt的对话框控件解决了。包括微软主页的那个（下载区选择）对话框都有这个问题。
@金色海洋（jyk）
就是招人呀
@inkink
你的名字我好像认识，不过差一个字~~
如果采用
transfererFrom:
后
1<input type="radio" id="style_num_1" name="style_num" value="1" checked />
这radio的选中效果会没掉..
@MY js
问题它的限制过高了呀！就好像IE你可以把JS支持也关掉，哪就什么都看不到了
请问一下....这个传值的时候相当于在本窗口...值好象过不去..如果在新窗口就可以接收了..怎么解决？
我也做过类似的。
问题是：jquery很不错，但是我们有时候整个网站中只应用一次，也用Jquery会不会降低效率？
能不能做个通用调用的
<a href="javascript:;" id="btnExampleAll2">1</a>
<a href="javascript:;" id="btnExampleAll2">1</a>
<a href="javascript:;" id="btnExampleAll2">N...</a>
不是得定义好多 script
@林清教
用Class代替ID,如以下代码：
<a href="javascript:;" class="showWindowLink">1</a>
<a href="javascript:;" class="showWindowLink">1</a>
<a href="javascript:;" class="showWindowLink">N...</a>
$(".showWindowLink").click(function(){
$(this).jWindowOpen({
modal:true,
center:true,
drag : ".title",
close:"#panelWindow .close",
closeHoverClass:"hover",
});
});
GOOGLE到您的大作，收益非浅，在此非常感谢！！！！
关闭模式窗口时，发现，模式窗口弹出了多少次，close:function(frm)就会调用多少次，可以在：
//关闭
//close(窗口的jquery Dom)
//Results none
//
close:function(frm){
frm.hide();
frm.DraggableDestroy();
this.removeOverlayer();
alert('Close window');
},
这段代码中添加“alert('Close window');”来DEBUG。
解决方法是：在115行中加入：$(defaults.close).unbind();
这样，在重新$(defaults.close).bind("click",function()时，才不会出现多次bind的情况。
请有兴趣的朋友也去调试一下，看看在各自的环境中是否会出现这种情况。
问一下大师，我要下来怎么单击页面什么也没有呀．．请问怎么才能看到效果呀．．
在ie下使用的时候文本框中的内容不能复制，有没有解决办法呢？？