• 欢迎访问搞代码网站，推荐使用最新版火狐浏览器和Chrome浏览器访问本网站！
  • 如果您觉得本站非常有看点，那么赶紧使用Ctrl+D 收藏搞代码吧
> 前端 > javascript > jQuery实现仿人人网弹出层效果_js

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

javascript 搞代码 7年前 (2018-06-13) 194次浏览 已收录 0个评论

有兴趣的朋友可以从文章最顶部的链接下载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实现仿人人网弹出层效果_js

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

http://www.gaodaima.com/29193.html

调用也很简单

  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实现仿人人网弹出层效果_js

上面的方法只是提示作用，显示一个消息。这比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=/"确认/"/>  
  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实现仿人人网弹出层效果_js

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

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

  1. var settings={   
  2. title:"添加用户",          //标题   
  3. width:"600px",   
  4. clickEvent:function(){  
  5.  
  6.    //do something   
  7. }  
  8. }   
  9. $.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=/"确认/"/>  
  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给力插件大阅兵
【责任编辑：陈贻新 TEL：（010）68476606】

欢迎大家阅读《jQuery实现仿人人网弹出层效果_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jQuery实现仿人人网弹出层效果_js

喜欢 (0)赏
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi，您需要填写昵称和邮箱！

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址