使用jQuery怎么实现一个弹出层效果

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

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

调用方法

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

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

$.promptWithRefresh = function(settings) {       var htmlDom = $("");       htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });       htmlDom.append("" + settings.msg + "");       $.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 + "");       $.blockUI({           message: htmlDom,           css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.baseZ }       });       pressEscOut();   }

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

$.msgBox = function(settings) {       var tempScreen = (document.body.clientWidth - settings.width.replace("px", "")) / 2;       var htmlDom = $("");       var msg = $("" + settings.title + "关闭" + settings.dom + "  ");       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();   }

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

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

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

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 = $("" + settings.title + "关闭" + settings.dom + "  ");       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;           }       });   }

关于使用jQuery怎么实现一个弹出层效果问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。