完美实现div弹出层功能,这里推荐一个轻量级js工具:subModal (包括图片和样式仅8KB左右,js文件4.27 KB)
subModal实现用DIV模拟的模式弹出窗口,非常漂亮且简单实用。下面看下运行效果:
其中发表评论窗口就是弹出窗口样式。
下面将介绍此js工具的使用:
在开始使用之前需要下载文件:
已经整理后的版本: subModal
原始版本(英文):http://gabrito.com/files/subModal/ 可以在此页面查看运行效果。
页面引用相关文件。在需要弹出窗口的页面上引用样式文件和Javascript文件:
1.
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"submodal.css"
/>
2.
<
script
type
=
"text/javascript"
src
=
"submodal.js"
></
script
>
源代码中的submodal.js, submodal.css, loading.html,loading.gif,close.gif 是必须文件,其他为演示实例文件。
- 若要改变弹出窗口样式,或者改变close.gif图片路径,请编辑 submodal.css
- 若需要改变加载效果,需编辑loading.html
现在我们就可以编写代码来弹出窗口了,有二种方式处理弹出窗口:
用js代码:
弹出窗口的函数为:showPopWin(url, width, height, returnFunc) ,url为弹出链接,width为宽带,height为高度,returnFunc为当窗口弹出后的回调函数。其中高宽以像素为单位,例如:
<!–以下代码将会在弹出DIV弹窗,弹窗中页面为modalcontent.html ,弹窗的宽度为400像素,高度为200像素–>
1.
<
p
><
button
onclick
=
"showPopWin('modalcontent.html', 400, 200, null);"
>show modal window button</
button
></
p
>
用样式:
subModal 支持设置特别的样式来完成弹出窗口的功能。当链接上设置submodal 或者submodal-width-height格式的样式后,页面运行过程中subModal将会为链接增加处理事件。当点击链接时,将在DIV弹窗中展示链接的页面,而不是新的浏览器窗口。
例如:
1.
<
p
><
a
class
=
"submodal"
href
=
"modalcontent.html"
>show modal window using class</
a
>
2.
<!--将在DIV弹窗中显示dodalcontent.html页面-->
</
p
>
3.
4.
<
p
><
a
class
=
"submodal-200-400"
href
=
"modalcontent.html"
>show modal window using class and overriding default size</
a
>
5.
<!--将在DIV弹窗中显示dodalcontent.html页面,且宽带为200像素,高度为400像素-->
</
p
>
关闭弹出可以在当前页码调用hidePopWin()函数或者在弹出页面中调用window.parent.hidePopWin(),如:
1.
<
button
onclick
=
"window.parent.hidePopWin()"
>close</
button
>
在 http://www.cnblogs.com/lzppcc/archive/2008/01/14/1038977.html看到到的这个弹出框很漂亮,但不能通过鼠标拖动弹出的窗口,难免遗憾,便自己写了JS代码,实现了这个功能. subModal.js//***********************以下为新增控件的拖曳事件*************************************************** initPopUp()方法中增加了三个事件,如下 <DIV class="x-window-header x-unselectable x-window-draggable" id="ext-gen15" style="MozUserSelect: none; KhtmlUserSelect: none" unselectable="on" onMousedown="startDrag(this)" onMouseup="stopDrag(this)" onMousemove="Draging(this,\'ext-comp-1001\')"> |