扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
使用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 = $("
" + settings.msg + " | "); 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 = $(" |
" + 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 = $(" |
" + 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 = $(" |
" + 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 = $(" |
" + 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 = $("
|