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

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

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

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

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

 
 
 
 
  
  
  
  //blockUI extend function  
  
  
  
  //以下三个方法在页面调用时，给点按钮或者文字添加onlick事件调用  
  
  
  
  //Confirm Delete or any other events  
  
  
  
  //1，该方法弹出带有确认与取消两个按钮的层，点击确认触发clickEvent()方法  
  
  
  
  $.confirm = function(settings) {  
  
  
  
      var htmlDom = $("

");

htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });

var msg = $("

" + settings.msg + "

class=\"standard-button\" value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();\"

style=\"margin-right:20px;\"/>");

htmlDom.append(msg);

msg.find('#confirmButton').click(settings.clickEvent);

$.blockUI({

message: htmlDom,

css: { width: "650px", height: "70px", "background-color": "#fff" }

});

pressEscOut();

}

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

调用也很简单

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

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

 
 
 
 
  
  
  
  $.confirmWithRefresh = function(settings) {  
  
  
  
       var htmlDom = $("

//弹出提示框
$.prompt = function(settings) {
var htmlDom = $("");
htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });
htmlDom.append("
" + settings.msg + "
onclick=\"javascript:closeBlockUINoFresh();\"/>");
$.blockUI({
message: htmlDom,
css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.baseZ }
});
pressEscOut();
}

$.promptWithRefresh = function(settings) {
var htmlDom = $("");
htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });
htmlDom.append("
" + settings.msg + "
onclick=\"javascript:closeBlockUI();\" />");
$.blockUI({
message: htmlDom,
css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.baseZ }
});
pressEscOut();
}
$.promptWithRefreshOverride = function(settings) {
var htmlDom = $("");
htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });
var msg = $("
" + settings.msg + "
");
htmlDom.append(msg);
msg.find('#Confirm').click(settings.clickEvent);
$.blockUI({
message: htmlDom,
css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.baseZ }
});
pressEscOut();
}
//弹出提示框无刷新
$.promptNoRefresh = function(settings) {
var htmlDom = $("");
htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });
htmlDom.append("
" + settings.msg + "
onclick=\"javascript:closeBlockUINoFresh();\" />");
$.blockUI({
message: htmlDom,
css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.baseZ }
});
pressEscOut();
}

$.msgBox = function(settings) {
var tempScreen = (document.body.clientWidth - settings.width.replace("px", "")) / 2;
var htmlDom = $("");
var msg = $("
style=\"vertical-align:top;width:100%\">
font-size:14px;padding-left:15px;padding-top:10px;padding-bottom:10px;background-color:#3777bc;
vertical-align:middle;color:#fff;font-weight:bold\">" + settings.title + "
background-color:#3777bc;vertical-align:middle;cursor:pointer;color:#fff;font-weight:bold\"
onclick=\"javascript:closeBlockUINoFresh();\">关闭
style=\"text-align:center;width:100%\">" + settings.dom + "
value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();\"/>");
htmlDom.append(msg);
msg.parent().find('#confirmButton').click(settings.clickEvent);
$.blockUI({
message: htmlDom,
css: { width: settings.width, "background-color": "#fff", "z-index": settings.baseZ, left: tempScreen }
});
pressEscOut();
}

var settings={
title:"添加用户", //标题
width:"600px",
clickEvent:function(){
//do something
}
}
$.msgBox(settings);

//该方法弹出添加或者修改的层，调用时需要传一个DOM以及层的标题。方法分别是formTitle(),appendTable()，
且该方法有确认与取消两个按钮，确认按钮事件需要在页面js中重写方法是clickEvent()
$.msgBoxWithRefresh = function(settings) {
var tempScreen = (document.body.clientWidth - settings.width.replace("px", "")) / 2;
var htmlDom = $("");
var msg = $("
class=\"innderTable\" style=\"vertical-align:top;width:100%\">
font-size:14px;padding-left:15px;padding-top:10px;padding-bottom:10px;background-color:#3777bc;
vertical-align:middle;color:#fff;font-weight:bold\">" + settings.title + "
background-color:#3777bc;vertical-align:middle;cursor:pointer;color:#fff;font-weight:bold\"
onclick=\"javascript:closeBlockUINoFresh();\">关闭
style=\"text-align:center;width:100%\">" + settings.dom + "
style=\"text-align:right;padding-right:10px;padding-bottom:10px;\">
onclick=\"javascript:closeBlockUINoFresh();\"/>");
htmlDom.append(msg);
msg.parent().find('#confirmButton').click(settings.clickEvent);
$.blockUI({
message: htmlDom,
css: { width: settings.width, "background-color": "#fff", "z-index": settings.baseZ, left: tempScreen }
});
pressEscOut();
}
//关闭blcokUI，该方法为默认方法，不需要变动。
function closeBlockUI() {
$.unblockUI();
location.reload();
return false;
}
//关闭blockUI但不刷新页面
function closeBlockUINoFresh() {
$.unblockUI();
}
function pressEscOut() {
$("*").keypress(function(event) {
var jianzhi = event.keyCode;
var input_keydown = $(this);
switch (jianzhi) {
case 27:
closeBlockUINoFresh();
break;
}
});
}