点击弹出层的实现代码分析

  1. 首页
  2. JQuery
  3. 正文

先看一下实现的效果图, 这个效果是通过点击弹出的
我要隐身

XML/HTML代码
  1. <a id="a_magic_invisible" href="magic.php?mid=invisible" onclick="ajaxmenu(event,this.id,1)" class="gray">点我弹出啦</a>  

点击之后先处理一个js函数

JavaScript代码
  1. function ajaxmenu(e, ctrlid, isbox, timeout, func) {   
  2.   
  3.     var offset = 0;   
  4.     var duration = 3;   
  5.   
  6.     if(isUndefined(timeout)) timeout = 0;   
  7.     if(isUndefined(isbox)) isbox = 0;   
  8.     if(timeout>0) duration = 0;   
  9.   
  10.     showloading();//等待时显示  
  11.   
  12.     if(jsmenu['active'][0] && jsmenu['active'][0].ctrlkey == ctrlid) {   
  13.         hideMenu();   
  14.         doane(e);   
  15.         return;   
  16.     } else if(is_ie && is_ie < 7 && document.readyState.toLowerCase() != 'complete') {   
  17.         return;   
  18.     }   
  19.   
  20.     if(isbox) {   
  21.         divclass = 'popupmenu_centerbox';//设置创建浮动层的css样式  
  22.         offset = -1;   
  23.     } else {   
  24.         divclass = 'popupmenu_popup';   
  25.     }   
  26.   
  27.     var div = $(ctrlid + '_menu');//设置创建div的id  
  28.     if(!div) {//如果div不存在，则创建  
  29.         div = document.createElement('div');//创建div标签  
  30.         div.ctrlid = ctrlid;   
  31.         div.id = ctrlid + '_menu';   
  32.         div.style.display = 'none';   
  33.         div.className = divclass;   
  34.         $('append_parent').appendChild(div);//将创建的div添加到页面中  
  35.     }   
  36.   
  37.     var x = new Ajax();//创建ajax对象  
  38.     var href = !isUndefined($(ctrlid).href) ? $(ctrlid).href : $(ctrlid).attributes['href'].value;   
  39.   
  40.     x.div = div;   
  41.     x.etype = e.type;   
  42.   
  43.     x.get(href, function(s) {//通过url获取页面内容  
  44.         evaled = false;   
  45.         if(s.indexOf('ajaxerror') != -1) {   
  46.             evaled = true;   
  47.         }   
  48.   
  49.         if(s.indexOf('hideMenu()') == -1) {//添加关闭  
  50.             s = '<h1>消息</h1><a href="javascript:hideMenu();" class="float_del" title="关闭">关闭</a><div class="popupmenu_inner">' + s + '<div>';   
  51.         }   
  52.         if(!evaled) {   
  53.             if(x.div) x.div.innerHTML = s;//将html内容添加到div中  
  54.             showMenu(ctrlid, x.etype == 'click', offset, duration, timeout, 0, ctrlid, 1000, true);   
  55.             //function  
  56.             if(func) {   
  57.                 setTimeout(func + '(\'' + ctrlid + '\')', 10);   
  58.             }   
  59.         }   
  60.         evalscript(s);   
  61.     });   
  62.   
  63.     showloading('none');   
  64.     doane(e);   
  65. }   
如果您觉得我的文章有帮助，请随意赞赏！
  1. typecho给代码块添加复制按钮
  2. 可用在Typecho上的非常酷炫代码（二）
  3. 可用在Typecho上的非常酷炫代码（一）
  4. 分享两个迅雷下载链接代码
  5. emlog模板制作手册—代码调用

*发表评论

用QQ账号登录  请登录后发表评论