jQuery实现仿人人网弹出层效果

开发 前端
本来这个是在网上下载的一个弹出层的插件,但是感觉之前的效果很不好而且功能也少,也只能是弹出一个层然后显示消息。因为项目的需要我将这个插件进行了拓展。感觉还行吧,所以拿出来分享一下。有兴趣的可以继续研究拓展哈。

有兴趣的朋友可以从文章最顶部的链接下载js文件。下面的代码是我所拓展的部分。在这分隔线之前基本上没有多少改动。

  1. 1 //---------------------------------------blockUI part end-----------------------------------  
  2.  2 //change blockUI default settings  
  3.  //change blockUI border  
  4.  $.blockUI.defaults.css.border = '5px solid #ccc';      //边框样式  
  5.  $.blockUI.defaults.css.cursor = 'default';                 //鼠标样式  
  6.  $.blockUI.defaults.css.top = '20%';                        //弹出层的位置  
  7.  $.blockUI.defaults.css.left = '30%';                          
  8.  $.blockUI.defaults.overlayCSS.cursor = 'default';  
  9.  //change fadeOut effact speed  
  10.  $.blockUI.defaults.fadeOut = 100;    //淡入淡出效果的速度  
  11.  $.blockUI.defaults.fadeIn = 100;  
  12.     

//上面这一部分主要功能是修改弹出层的默认样式

//----------==================================华丽的分割线================================---

  1. //blockUI extend function  
  2. //以下三个方法在页面调用时,给点按钮或者文字添加onlick事件调用  
  3. //Confirm Delete or any other events  
  4. //1,该方法弹出带有确认与取消两个按钮的层,点击确认触发clickEvent()方法  
  5. $.confirm = function(settings) {  
  6.     var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  7.     htmlDom.css({ "text-align""center""vertical-align""middle""line-height""70px" });  
  8.     var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\">
  9. <tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋体\">" + settings.msg + "</td>
  10. <td id=\"ConfirmTd\"><input type=\"button\"class=\"standard-button\" value=\"确认\" id=\"confirmButton\" />
  11. </td><td style=\"padding-left:10px\"><input type=\"button\" id=\"close\" 
  12. class=\"standard-button\" value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();\" 
  13.  style=\"margin-right:20px;\"/></td></tr></table>");  
  14.     htmlDom.append(msg);  
  15.     msg.find('#confirmButton').click(settings.clickEvent);  
  16.     $.blockUI({  
  17.         message: htmlDom,  
  18.         css: { width: "650px", height: "70px""background-color""#fff" }  
  19.     });  
  20.     pressEscOut();  
  21. }  
  22.    

jQuery

这个截图就是上面的confrim()方法的效果。有一个确认按钮,然后有一个取消按钮。

调用也很简单

  1. $(function(){  
  2.       var settings={  
  3.        msg:"确认删除选中的记录?",  //要在弹出层上显示的消息  
  4.        clickEvent:function(){  
  5.          //do something              此处是给确定按钮绑定方法  
  6.       }}  
  7.       $.confirm(settings);         //此处调用方法,然后把上面的定义的settings对象做为参数传入   
  8.  });   
  9.  

上面这个方法点击取消或者确认按钮后页面是无刷新的,但是有时候操作之后需要刷新页面那就用下面这个方法,调用方法跟上面的一致,只是方法名变了而已。

  1. $.confirmWithRefresh = function(settings) {  
  2.      var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  3.      htmlDom.css({ "text-align""center""vertical-align""middle""line-height""70px" });  
  4.      var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" 
  5. width=\"100%\"><tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋体\">"
  6.  + settings.msg + "</td><td id=\"ConfirmTd\"><input type=\"button\"class=\"standard-button\" value=\"确认\" 
  7. id=\"confirmButton\" /></td><td style=\"padding-left:10px\"><input type=\"button\" id=\"close\" 
  8. class=\"standard-button\" id=\"cancelButton\" value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();
  9. \" style=\"margin-right:20px;\"/></td></tr></table>");  
  10.      htmlDom.append(msg);  
  11.      msg.find('#confirmButton').click(settings.clickEvent);  
  12.      $.blockUI({  
  13.          message: htmlDom,  
  14.          css: { width: "650px", height: "70px""background-color""#fff" }  
  15.      });  
  16.      pressEscOut();  
  17.  }  
  18.  //对于有些页面关闭层时不需要刷新页面,所以采用不同的关闭方式  
  19.  $.confirmNoRefresh = function(settings) {  
  20.      var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  21.      htmlDom.css({ "text-align""center""vertical-align""middle""line-height""70px" });  
  22.      var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\">
  23. <tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋体\">" + settings.msg + "</td>
  24. <td id=\"ConfirmTd\"><input type=\"button\"class=\"standard-button\" value=\"确认\" id=\"confirmButton\" />
  25. </td><td style=\"padding-left:10px\"><input type=\"button\" 
  26. id=\"close\" class=\"standard-button\" id=\"cancelButton\" value=\"取消\" 
  27. onclick=\"javascript:closeBlockUINoFresh();\" style=\"margin-right:20px;\"/></td></tr></table>");  
  28.      htmlDom.append(msg);  
  29.      msg.find('#confirmButton').click(settings.clickEvent);  
  30.      $.blockUI({  
  31.          message: htmlDom,  
  32.          css: { width: "650px", height: "70px""background-color""#fff" }  
  33.      });  
  34.      pressEscOut();  
  35.  }   
  36.  
  1. //弹出提示框  
  2. $.prompt = function(settings) {  
  3.     var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  4.     htmlDom.css({ "text-align""center""vertical-align""middle""line-height""70px" });  
  5.     htmlDom.append("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\">
  6. <tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋体\">" + settings.msg + "</td>
  7. <td><input type=\"button\" id=\"Confirm\" value=\"确认\" class=\"standard-button\" 
  8. onclick=\"javascript:closeBlockUINoFresh();\"/></td></tr></table>");  
  9.     $.blockUI({  
  10.         message: htmlDom,  
  11.         css: { width: "550px", height: "70px""background-color""#fff""z-index": settings.baseZ }  
  12.     });  
  13.     pressEscOut();  
  14. }     

jQuery

上面的方法只是提示作用,显示一个消息。这比alert()可好看多了吧

调用方法

$.prompt({msg:"删除成功"});

下面的方法就是刷新页面的了

  1. $.promptWithRefresh = function(settings) {  
  2.      var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  3.      htmlDom.css({ "text-align""center""vertical-align""middle""line-height""70px" });  
  4.      htmlDom.append("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\">
  5. <tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋体\">" + settings.msg + "</td>
  6. <td><input type=\"button\" id=\"Confirm\" value=\"确认\" class=\"standard-button\" 
  7. onclick=\"javascript:closeBlockUI();\" /></td></tr></table>");  
  8.      $.blockUI({  
  9.          message: htmlDom,  
  10.          css: { width: "550px", height: "70px""background-color""#fff""z-index": settings.baseZ }  
  11.      });  
  12.      pressEscOut();  
  13.  }  
  14.  $.promptWithRefreshOverride = function(settings) {  
  15.      var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  16.      htmlDom.css({ "text-align""center""vertical-align""middle""line-height""70px" });  
  17.      var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\">
  18. <tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋体\">" + settings.msg + "</td>
  19. <td><input type=\"button\" id=\"Confirm\" value=\"确认\" class=\"standard-button\"/></td></tr></table>");  
  20.      htmlDom.append(msg);  
  21.      msg.find('#Confirm').click(settings.clickEvent);  
  22.      $.blockUI({  
  23.          message: htmlDom,  
  24.          css: { width: "550px", height: "70px""background-color""#fff""z-index": settings.baseZ }  
  25.      });  
  26.      pressEscOut();  
  27.  }  
  28.  //弹出提示框无刷新  
  29.  $.promptNoRefresh = function(settings) {  
  30.      var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  31.      htmlDom.css({ "text-align""center""vertical-align""middle""line-height""70px" });  
  32.      htmlDom.append("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\">
  33. <tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋体\">" + settings.msg + "</td>
  34. <td><input type=\"button\" id=\"Confirm\" value=\"确认\" class=\"standard-button\" 
  35. onclick=\"javascript:closeBlockUINoFresh();\" /></td></tr></table>");  
  36.      $.blockUI({  
  37.          message: htmlDom,  
  38.          css: { width: "550px", height: "70px""background-color""#fff""z-index": settings.baseZ }  
  39.      });  
  40.      pressEscOut();  
  41.  } 

//该方法弹出添加或者修改的层,调用时需要传一个DOM以及层的标题。方法分别是formTitle(),appendTable(),且该方法有确认与取消两个按钮,确认按钮事件需要在页面js中重写方法是clickEvent()

  1. $.msgBox = function(settings) {  
  2.      var tempScreen = (document.body.clientWidth - settings.width.replace("px""")) / 2;  
  3.      var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  4.      var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"innderTable\" 
  5. style=\"vertical-align:top;width:100%\"><tr><td width=\"80%\" style=\"text-align:left;font-family:宋体;
  6. font-size:14px;padding-left:15px;padding-top:10px;padding-bottom:10px;background-color:#3777bc;
  7. vertical-align:middle;color:#fff;font-weight:bold\">" + settings.title + "</td>
  8. <td id=\"ConfirmTd\" style=\"text-align:right;padding-right:5px;padding-top:10px;padding-bottom:10px;
  9. background-color:#3777bc;vertical-align:middle;cursor:pointer;color:#fff;font-weight:bold\"
  10.  onclick=\"javascript:closeBlockUINoFresh();\">关闭</td></tr><tr><td colspan=\"2\"
  11.  style=\"text-align:center;width:100%\">" + settings.dom + "</td></tr>
  12. <tr><td colspan=\"2\" style=\"text-align:right;padding-right:10px;padding-bottom:10px;\">
  13. <input type=\"button\" class=\"standard-button\" id=\"confirmButton\" value=\"确认\"/>&nbsp;&nbsp;
  14. <input type=\"button\" id=\"close\"class=\"standard-button\" 
  15. value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();\"/></td></tr></table>");  
  16.      htmlDom.append(msg);  
  17.      msg.parent().find('#confirmButton').click(settings.clickEvent);  
  18.      $.blockUI({  
  19.          message: htmlDom,  
  20.          css: { width: settings.width, "background-color""#fff""z-index": settings.baseZ, left: tempScreen }  
  21.      });  
  22.      pressEscOut();  
  23.  }  

这个方法就比较强大了,可以传一个dom进来。

jQuery

看着挺像人人网的弹出层吧,样式确实是模仿的人人网的。

调用方法也还是先定义一个对象。给属性赋值.属性有哪些看看上面的代码中settings.xxxx 这xxxxx就是属性。还可以根据自己的需要去添加,或者减少。

  1. var settings={   
  2. title:"添加用户",          //标题   
  3. width:"600px",   
  4. clickEvent:function(){  
  5.  
  6.    //do something   
  7. }   
  8. $.msgBox(settings);  
  1. //该方法弹出添加或者修改的层,调用时需要传一个DOM以及层的标题。方法分别是formTitle(),appendTable(),
  2. 且该方法有确认与取消两个按钮,确认按钮事件需要在页面js中重写方法是clickEvent()  
  3.  $.msgBoxWithRefresh = function(settings) {  
  4.      var tempScreen = (document.body.clientWidth - settings.width.replace("px""")) / 2;  
  5.      var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  6.      var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\"
  7.  class=\"innderTable\" style=\"vertical-align:top;width:100%\"><tr>
  8. <td width=\"80%\" style=\"text-align:left;font-family:宋体;
  9. font-size:14px;padding-left:15px;padding-top:10px;padding-bottom:10px;background-color:#3777bc;
  10. vertical-align:middle;color:#fff;font-weight:bold\">" + settings.title + "</td>
  11. <td id=\"ConfirmTd\" style=\"text-align:right;padding-right:5px;padding-top:10px;padding-bottom:10px;
  12. background-color:#3777bc;vertical-align:middle;cursor:pointer;color:#fff;font-weight:bold\" 
  13. onclick=\"javascript:closeBlockUINoFresh();\">关闭</td></tr><tr><td colspan=\"2\" 
  14. style=\"text-align:center;width:100%\">" + settings.dom + "</td></tr><tr><td colspan=\"2\"
  15.  style=\"text-align:right;padding-right:10px;padding-bottom:10px;\">
  16. <input type=\"button\" class=\"standard-button\" id=\"confirmButton\" value=\"确认\"/>&nbsp;&nbsp;
  17. <input type=\"button\" id=\"close\"class=\"standard-button\" value=\"取消\" 
  18. onclick=\"javascript:closeBlockUINoFresh();\"/></td></tr></table>");  
  19.      htmlDom.append(msg);  
  20.      msg.parent().find('#confirmButton').click(settings.clickEvent);  
  21.      $.blockUI({  
  22.          message: htmlDom,  
  23.          css: { width: settings.width, "background-color""#fff""z-index": settings.baseZ, left: tempScreen }  
  24.      });  
  25.      pressEscOut();  
  26.  }  
  27.  //关闭blcokUI,该方法为默认方法,不需要变动。  
  28.  function closeBlockUI() {  
  29.      $.unblockUI();  
  30.      location.reload();  
  31.      return false;  
  32.  }  
  33.  //关闭blockUI但不刷新页面  
  34.  function closeBlockUINoFresh() {  
  35.      $.unblockUI();  
  36.  }  
  37.  function pressEscOut() {  
  38.      $("*").keypress(function(event) {  
  39.          var jianzhi = event.keyCode;  
  40.          var input_keydown = $(this);  
  41.          switch (jianzhi) {  
  42.              case 27:  
  43.                  closeBlockUINoFresh();  
  44.                  break;  
  45.          }  
  46.      });  
  47.  }    
  48.    
  49.  

注明一下哈:虽然原本的插件不是本人原创,但拓展方法本人确实花了些心思。

原文链接:http://www.cnblogs.com/think_fish/archive/2011/03/30/1999506.html

【编辑推荐】

  1. 27个新鲜惊奇的jQuery插件与教程
  2. 手把手教你用jQuery做动画插件
  3. PHP+MySQL+jQuery实现随意拖动层
  4. jQuery拖动布局实现排序结果同步数据库
  5. jQuery给力插件大阅兵
责任编辑:陈贻新 来源: 博客园
相关推荐

2010-09-07 09:30:25

DIV弹出jQuery

2015-03-24 13:10:49

javascript中关村论坛提示效果

2010-08-30 10:09:07

JavaScriptDIV

2015-07-23 15:15:06

动态弹出

2012-06-07 15:14:52

jQuery

2009-06-26 16:12:08

ThickboxjQuery

2011-04-15 09:29:20

jQueryFlash

2022-09-21 14:51:21

ArkUI信件弹出

2010-10-09 11:09:32

JavaScript弹

2011-12-08 14:09:07

2011-12-13 14:15:30

2011-12-08 16:18:40

2011-12-13 13:54:42

2015-02-02 16:42:49

特效密码锁

2013-01-05 14:51:34

JavaScriptjQuery面试

2013-09-03 10:10:00

人人网移动开发架构

2013-09-03 10:22:02

人人网移动开发架构

2011-03-23 10:55:55

PHPMySQLjQuery

2009-09-23 17:19:19

jQuery页面渐显效

2012-04-10 10:41:59

jQueryASP.NET
点赞
收藏

51CTO技术栈公众号