Javascript弹出对话框组件
自从做前端以来 也快有一年了,也接触过很多javascript框架,比如Jquery YUI KISSY等等,但是有时候太依赖于框架并不好,要更多的学习原审javascript才会更能理解!因为IT很多大型公司都有自己内部封装的框架,所以对于我们前端人员来说 框架并不可靠 可靠的要深刻理解javascript!今天我分享的是弹出对话框组件,以前做页面时 做项目时 都是调用腾讯写好的弹出框组件,但是一直用它的也并不好!所以我用Jquery框架写了个弹出框来,然后借助于那个思想!简单的用javascript封装了下!为什么我会想的写组件呢 那是因为考虑到网站性能及高效的代码!因为如果你没有用组件的话 假如页面上有100个甚至更多弹出框 那你是不是要写更多的重复js代码,嘿嘿 好了 废话小说... 现在来谈谈我写的这个弹出框的一个思路吧!能兼容IE6 7 8 火狐 谷歌 搜狗 等等游览器!
1.点击HTML元素时 弹出一个对话框 同时使页面的颜色变成半透明! 2.弹出对话框要居中对齐 并且当页面缩放时 也要居中对齐!
下面是HTML/css代码
- <script type="text/javascript">
- function getType(o){
- var _t;
- return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
- }
- //获取元素样式
- function getStyle(el, styleName) {
- return el.style[styleName] ? el.style[styleName] : el.currentStyle ? el.currentStyle[styleName] : window.getComputedStyle(el, null)[styleName];
- }
- function getStyleNum(el, styleName) {
- return parseInt(getStyle(el, styleName).replace(/px|pt|em/ig,''));
- }
- function setStyle(el, obj){
- if (getType(obj) == "object") {
- for (s in obj) {
- var cssArrt = s.split("-");
- for (var i = 1; i < cssArrt.length; i++) {
- cssArrt[i] = cssArrt[i].replace(cssArrt[i].charAt(0), cssArrt[i].charAt(0).toUpperCase());
- }
- var cssArrtnew = cssArrt.join("");
- el.style[cssArrtnew] = obj[s];
- }
- }
- else
- if (getType(obj) == "string") {
- el.style.cssText = obj;
- }
- }
- function getSize(el) {
- if (getStyle(el, "display") != "none") {
- return { width: el.offsetWidth || getStyleNum(el, "width"), height: el.offsetHeight || getStyleNum(el, "height") };
- }
- var _addCss = { display: "", position: "absolute", visibility: 'hidden' };
- var _oldCss = {};
- for (i in _addCss) {
- _oldCss[i] = getStyle(el, i);
- }
- setStyle(el, _addCss);
- var _width = el.clientWidth || getStyleNum(el, "width");
- var _height = el.clientHeight || getStyleNum(el, "height");
- for (i in _oldCss) {
- setStyle(el, _oldCss);
- }
- return { width: _width, height: _height };
- }
- function Sid(id){
- return "string" ==typeof id ? document.getElementById(id) : id;
- }
- function WW(sID,hID,cID){
- var ss = Sid(sID),
- hh = Sid(hID),
- cc = Sid(cID);
- (function(id){
- ss.onclick = function(){
- showDialog(id);
- hh.style.display = "block";
- }
- })(hh);
- cc.onclick = function(){
- hh.style.display = "none";
- }
- }
- var dialogId = '';
- function showDialog(hh){
- dialogId = hh;
- var cw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
- ch = window.innerHeight|| document.documentElement.clientHeight || document.body.clientHeight;
- var objC = Sid(hh);
- var objW = getSize(objC).width,
- objH = getSize(objC).height,
- scrollL = document.documentElement.scrollLeft || document.body.scrollLeft
- scrollT = document.documentElement.scrollTop || document.body.scrollTop;
- var left = (cw-objW)/2 + scrollL,
- top = (ch-objH)/2 + scrollT;
- objC.style.left = left+"px";
- objC.style.top = top + "px";
- }
- window.onresize = function(){
- showDialog(dialogId);
- }
- </script>
- <script>
- new WW("buy_btn1","window1","closed1");
- new WW("buy_btn2","window2","closed2");
- </script>
- <!-- 很抱歉 不足90元 -->
- <div id="window1"><div id="closed1"></div></div>
- <!-- 很抱歉 每个买家只能参加五个活动 -->
- <div id="window2"><div id="closed2"></div></div>
- <!-- 很抱歉 当日道具码被另完了 -->
- <div id="window3"><div id="closed3"></div></div>
- <!-- 很抱歉 活动已经结束了 -->
- <div id="window4"><div id="closed4"></div></div>
点击aaaaa元素时就会弹出一个对话框 并且居中对齐 ,但是要注意几个问题:一开始时候我用display:none;把对话框隐藏了起来,大家都知道display:none 这样设置后,然后再js里面获取隐藏的对话框的宽度和高度时候根本就获取不到!因为diaplay:none后在页面上不占据任何的物理空间!所以当你用上面的js获取宽度和高度时候 会显示0;之后我想用HTML这个属性:visiblity:hidden;当调用js时获取宽度和高度之前用js让他显示出来!就可以获取隐藏后对话框的宽度和高度 因为他隐藏了但还是占据物理空间,然后就可以顺利的计算对话框居中的位置!!但是用visiblity:hidden可以完成居中这个方法 并且兼容IE6 IE8 火狐 谷歌等游览器 但是在IE7下有个小小的bug 就是我一打开页面 本来用visiblity:hidden 弹出框是隐藏的 但是在IE7下 他却能显现出来 但是当你一刷新后就没有啊 之后你再点击 关闭都是正常的!但是在打开页面渲染的时候 有个小小bug 所以用了上面一段js来获取隐藏后的对话框的宽度和高度就可以了!!调用方法:在页面上可以看得到!还要注意一个情况是:
document.documentElement.scrollLeft 这个方法和 document.documentElement.scrollTop在IE和火狐都显示正常, 但是在谷歌和360则显示不正常 所以要加上 document.body.scrollTop和document.body.scrollLeft!