javascript 通过封装div方式弹出div窗体

 更新时间:2009年10月29日 23:05:46   作者:  
废话少说,此js对象是通过封装页面上的div,将其弹出,可以弹出多个,参考了一些高人代码,达到我要的效果。先看看效果图。配合一css就可以很好看了。

图1(弹出一个div)

 

图2(弹出多个)
构造函数:

复制代码 代码如下:

var DivWindow= function(popup/*最外层div id*/,popup_drag/*拖动div id*/,popup_exit/*退出按钮id*/ ,exitButton/*触发服务器端退出按钮id*/,varwidth,varheight,zindex){
this.popup =popup ;
this.height =varheight ; //窗口高度,并没用来设置窗口高度宽度,用来定位在屏幕的位置
this.width =varwidth ; //窗口宽度
this.popup_exit=popup_exit;
this.exitButton=exitButton;
this.zindex=zindex;
this.init = function(){ //初始化窗口
this.popupShow();
this.startDrag(); //设置拖动
this.setCommond(); //设置关闭
DivWindow.ArrayW.push(document.getElementById(this.popup)); //存储窗口到数组
};this.init();
};

调用:
复制代码 代码如下:

<input type="button" id="show" onclick="javascript:new DivWindow('popup','popup_drag','popup_exit','exitButton','500','700',4);" value='触发弹出详细基本资料DIV' />

有的地方可能大家觉得有点奇怪,不要问我问什么,因为我有这个需要,有时间再修改一下遮罩效果。更详细代码请见下载
完整代码

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

打包下载

相关文章

  • Echarts图表分析巴西队历年战绩实例详解

    Echarts图表分析巴西队历年战绩实例详解

    这篇文章主要为大家介绍了Echarts图表分析巴西队历年战绩实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • js模拟F11页面全屏显示

    js模拟F11页面全屏显示

    这篇文章主要为大家详细介绍了js模拟实现F11使页面全屏显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • JavaScript验证图片类型(扩展名)的函数分享

    JavaScript验证图片类型(扩展名)的函数分享

    这篇文章主要介绍了JavaScript验证图片类型的函数分享,需要的朋友可以参考下
    2014-05-05
  • JavaScript如何让select选择框可输入和可下拉选择

    JavaScript如何让select选择框可输入和可下拉选择

    我们知道一般select下拉框是只能选择的,而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时,需要允许用户输入想要的内容,这篇文章主要给大家介绍了关于JavaScript如何让select选择框可输入和可下拉选择的相关资料,需要的朋友可以参考下
    2023-10-10
  • Bootstrap模态框水平垂直居中与增加拖拽功能

    Bootstrap模态框水平垂直居中与增加拖拽功能

    最近开发一个CMS系统使用上了Bootstrap,在开发一个添加某些选项时,打算弹出一个模态框,但是发现,模态框不会垂直居中到屏幕上,而是在屏幕上方,通过查阅资料才解决此问题,下面小编给大家分享解决思路
    2016-11-11
  • JavaScript制作淘宝星级评分效果的思路

    JavaScript制作淘宝星级评分效果的思路

    这篇文章主要介绍了JavaScript制作淘宝星级评分效果的整个思考过程,思路很清晰,并附带了完整的程序源码,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JS前端框架关于重构的失败经验分享

    JS前端框架关于重构的失败经验分享

    关于重构JS前端框架的失败经验接下来与大家分享一下,感兴趣的你可不要错过了哈,毕竟是经验之谈哈
    2013-03-03
  • JavaScript实现翻页功能(附效果图)

    JavaScript实现翻页功能(附效果图)

    这篇文章主要介绍了JavaScript实现翻页功能(附效果图),在项目需求中经常遇到,今天小编抽时间给大家分享JavaScript实现翻页功能实例代码,需要的朋友参考下吧
    2017-02-02
  • 详解JS如何解决大数据下滚动页面卡顿问题

    详解JS如何解决大数据下滚动页面卡顿问题

    之前遇到不分页直接获取到全部数据,前端滚动查看数据,页面就挺卡顿的,所以这篇文章来和大家聊聊如何解决这一问题,感兴趣的小伙伴可以了解下
    2023-07-07
  • JS字符串截取出现的bug以及解决方式

    JS字符串截取出现的bug以及解决方式

    之前在获取元素属性时,踩了个坑,记录一下,下面这篇文章主要给大家介绍了关于JS字符串截取出现的bug以及解决方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12

最新评论