文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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

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 = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");      htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });      var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\"><tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋体\">" + settings.msg + "</td><td id=\"ConfirmTd\"><input type=\"button\"class=\"standard-button\" value=\"确认\" id=\"confirmButton\" /></td><td style=\"padding-left:10px\"><input type=\"button\" id=\"close\" class=\"standard-button\" value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();\"  style=\"margin-right:20px;\"/></td></tr></table>");      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 = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");       htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });       var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\"><tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋体\">" + settings.msg + "</td><td id=\"ConfirmTd\"><input type=\"button\"class=\"standard-button\" value=\"确认\" id=\"confirmButton\" /></td><td style=\"padding-left:10px\"><input type=\"button\" id=\"close\" class=\"standard-button\" id=\"cancelButton\" value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();\" style=\"margin-right:20px;\"/></td></tr></table>");       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 = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");       htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });       var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\"><tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋体\">" + settings.msg + "</td><td id=\"ConfirmTd\"><input type=\"button\"class=\"standard-button\" value=\"确认\" id=\"confirmButton\" /></td><td style=\"padding-left:10px\"><input type=\"button\" id=\"close\" class=\"standard-button\" id=\"cancelButton\" value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();\" style=\"margin-right:20px;\"/></td></tr></table>");       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 = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");      htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });      htmlDom.append("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\"><tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋体\">" + settings.msg + "</td><td><input type=\"button\" id=\"Confirm\" value=\"确认\" class=\"standard-button\" onclick=\"javascript:closeBlockUINoFresh();\"/></td></tr></table>");      $.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 = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");       htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });       htmlDom.append("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\"><tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋体\">" + settings.msg + "</td><td><input type=\"button\" id=\"Confirm\" value=\"确认\" class=\"standard-button\" onclick=\"javascript:closeBlockUI();\" /></td></tr></table>");       $.blockUI({           message: htmlDom,           css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.baseZ }       });       pressEscOut();   }   $.promptWithRefreshOverride = function(settings) {       var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");       htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });       var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\"><tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋体\">" + settings.msg + "</td><td><input type=\"button\" id=\"Confirm\" value=\"确认\" class=\"standard-button\"/></td></tr></table>");       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 = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");       htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });       htmlDom.append("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\"><tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋体\">" + settings.msg + "</td><td><input type=\"button\" id=\"Confirm\" value=\"确认\" class=\"standard-button\" onclick=\"javascript:closeBlockUINoFresh();\" /></td></tr></table>");       $.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 = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");       var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"innderTable\" style=\"vertical-align:top;width:100%\"><tr><td width=\"80%\" style=\"text-align:left;font-family:宋体;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 + "</td><td id=\"ConfirmTd\" style=\"text-align:right;padding-right:5px;padding-top:10px;padding-bottom:10px;background-color:#3777bc;vertical-align:middle;cursor:pointer;color:#fff;font-weight:bold\" onclick=\"javascript:closeBlockUINoFresh();\">关闭</td></tr><tr><td colspan=\"2\" style=\"text-align:center;width:100%\">" + settings.dom + "</td></tr><tr><td colspan=\"2\" style=\"text-align:right;padding-right:10px;padding-bottom:10px;\"><input type=\"button\" class=\"standard-button\" id=\"confirmButton\" value=\"确认\"/>&nbsp;&nbsp;<input type=\"button\" id=\"close\"class=\"standard-button\" value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();\"/></td></tr></table>");       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 = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");       var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"innderTable\" style=\"vertical-align:top;width:100%\"><tr><td width=\"80%\" style=\"text-align:left;font-family:宋体;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 + "</td><td id=\"ConfirmTd\" style=\"text-align:right;padding-right:5px;padding-top:10px;padding-bottom:10px;background-color:#3777bc;vertical-align:middle;cursor:pointer;color:#fff;font-weight:bold\" onclick=\"javascript:closeBlockUINoFresh();\">关闭</td></tr><tr><td colspan=\"2\" style=\"text-align:center;width:100%\">" + settings.dom + "</td></tr><tr><td colspan=\"2\" style=\"text-align:right;padding-right:10px;padding-bottom:10px;\"><input type=\"button\" class=\"standard-button\" id=\"confirmButton\" value=\"确认\"/>&nbsp;&nbsp;<input type=\"button\" id=\"close\"class=\"standard-button\" value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();\"/></td></tr></table>");       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怎么实现一个弹出层效果问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网行业资讯频道了解更多相关知识。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯