189 8069 5689

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

使用jQuery怎么实现一个弹出层效果，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

珲春网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联从2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

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 + "");      htmlDom.append(msg);      msg.find('#confirmButton').click(settings.clickEvent);      $.blockUI({          message: htmlDom,          css: { width: "650px", height: "70px", "background-color": "#fff" }      });      pressEscOut();  }

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

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

调用也很简单

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

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

$.confirmWithRefresh = function(settings) {       var htmlDom = $("
");       htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });       var msg = $("" + settings.msg + "");       htmlDom.append(msg);       msg.find('#confirmButton').click(settings.clickEvent);       $.blockUI({           message: htmlDom,           css: { width: "650px", height: "70px", "background-color": "#fff" }       });       pressEscOut();   }   //对于有些页面关闭层时不需要刷新页面，所以采用不同的关闭方式   $.confirmNoRefresh = function(settings) {       var htmlDom = $("
");       htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });       var msg = $("" + settings.msg + "");       htmlDom.append(msg);       msg.find('#confirmButton').click(settings.clickEvent);       $.blockUI({           message: htmlDom,           css: { width: "650px", height: "70px", "background-color": "#fff" }       });       pressEscOut();   }
//弹出提示框  $.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();  }

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

上面的方法只是提示作用，显示一个消息。这比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进来。

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

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

调用方法也还是先定义一个对象。给属性赋值.属性有哪些看看上面的代码中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怎么实现一个弹出层效果问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。


标题名称：使用jQuery怎么实现一个弹出层效果
文章位置：http://cdxtjz.cn/article/jopheg.html

其他资讯

联系我们

您好HELLO!
感谢您来到成都网站建设公司，若您有合作意向，请您为我们留言或使用以下方式联系我们， 我们将尽快给你回复，并为您提供真诚的设计服务，谢谢。
  • 电话：028- 86922220 18980695689
  • 商务合作邮箱：631063699@qq.com
  • 合作QQ： 532337155
  • 成都网站设计地址：成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队，始终保持务实的风格，以"帮助客户成功"为已任，专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司；我们对营销、技术、管理都有自己独特见解，小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务！

小谭观点

相对传统的成都网站建设公司而言，小谭是互联网中的网站品牌策划，我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为，网站必须注入企业基因，真正使网站成为企业vi的一部分，让整个网站品牌策划体系变的深入而持久。
友情链接： 金融行业网站建设方案   川西大数据中心   成都seo优化   软文推广   软文发稿   小谭网创广告   电商网站   眉山电信机房托管   网上商城开发   四川搅拌罐车   
© Copyright 2023 小谭建站工作室All Rights Reserved.  蜀ICP备2021004003号-2  成都网站建设 / 成都网站建设 / 响应式网站建设 / 定制网站建设  xml 网站地图