使用jQuery怎么實(shí)現(xiàn)一個(gè)彈出層效果

使用jQuery怎么實(shí)現(xiàn)一個(gè)彈出層效果，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

琿春網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)從2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

1 //---------------------------------------blockUI part end-----------------------------------   2 //change blockUI default settings   //change blockUI border   $.blockUI.defaults.css.border = '5px solid #ccc';      //邊框樣式   $.blockUI.defaults.css.cursor = 'default';                 //鼠標(biāo)樣式   $.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;

//上面這一部分主要功能是修改彈出層的默認(rèn)樣式

//----------==================================華麗的分割線================================---

//blockUI extend function  //以下三個(gè)方法在頁面調(diào)用時(shí)，給點(diǎn)按鈕或者文字添加onlick事件調(diào)用  //Confirm Delete or any other events  //1，該方法彈出帶有確認(rèn)與取消兩個(gè)按鈕的層，點(diǎn)擊確認(rèn)觸發(fā)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=\"確認(rèn)\" 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怎么實(shí)現(xiàn)一個(gè)彈出層效果

這個(gè)截圖就是上面的confrim()方法的效果。有一個(gè)確認(rèn)按鈕，然后有一個(gè)取消按鈕。

調(diào)用也很簡單

$(function(){        var settings={         msg:"確認(rèn)刪除選中的記錄?",  //要在彈出層上顯示的消息         clickEvent:function(){           //do something              此處是給確定按鈕綁定方法        }}        $.confirm(settings);         //此處調(diào)用方法，然后把上面的定義的settings對(duì)象做為參數(shù)傳入    });

上面這個(gè)方法點(diǎn)擊取消或者確認(rèn)按鈕后頁面是無刷新的，但是有時(shí)候操作之后需要刷新頁面那就用下面這個(gè)方法，調(diào)用方法跟上面的一致，只是方法名變了而已。

$.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=\"確認(rèn)\" 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();   }   //對(duì)于有些頁面關(guān)閉層時(shí)不需要刷新頁面，所以采用不同的關(guān)閉方式   $.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=\"確認(rèn)\" 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=\"確認(rèn)\" 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怎么實(shí)現(xiàn)一個(gè)彈出層效果

上面的方法只是提示作用，顯示一個(gè)消息。這比alert()可好看多了吧

調(diào)用方法

$.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=\"確認(rèn)\" 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=\"確認(rèn)\" 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=\"確認(rèn)\" 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();   }

//該方法彈出添加或者修改的層，調(diào)用時(shí)需要傳一個(gè)DOM以及層的標(biāo)題。方法分別是formTitle(),appendTable()，且該方法有確認(rèn)與取消兩個(gè)按鈕，確認(rèn)按鈕事件需要在頁面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();\">關(guān)閉</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=\"確認(rèn)\"/>&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();   }

這個(gè)方法就比較強(qiáng)大了，可以傳一個(gè)dom進(jìn)來。

使用jQuery怎么實(shí)現(xiàn)一個(gè)彈出層效果

看著挺像人人網(wǎng)的彈出層吧，樣式確實(shí)是模仿的人人網(wǎng)的。

調(diào)用方法也還是先定義一個(gè)對(duì)象。給屬性賦值.屬性有哪些看看上面的代碼中settings.xxxx 這xxxxx就是屬性。還可以根據(jù)自己的需要去添加，或者減少。

var settings={   title:"添加用戶",          //標(biāo)題   width:"600px",   clickEvent:function(){      //do something   }  }   $.msgBox(settings);
//該方法彈出添加或者修改的層，調(diào)用時(shí)需要傳一個(gè)DOM以及層的標(biāo)題。方法分別是formTitle(),appendTable()，且該方法有確認(rèn)與取消兩個(gè)按鈕，確認(rèn)按鈕事件需要在頁面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();\">關(guān)閉</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=\"確認(rèn)\"/>&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();   }   //關(guān)閉blcokUI，該方法為默認(rèn)方法，不需要變動(dòng)。   function closeBlockUI() {       $.unblockUI();       location.reload();       return false;   }   //關(guān)閉blockUI但不刷新頁面   function closeBlockUINoFresh() {       $.unblockUI();   }   function pressEscOut() {       $("*").keypress(function(event) {           var jianzhi = event.keyCode;           var input_keydown = $(this);           switch (jianzhi) {               case 27:                   closeBlockUINoFresh();                   break;           }       });   }

關(guān)于使用jQuery怎么實(shí)現(xiàn)一個(gè)彈出層效果問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

當(dāng)前文章：使用jQuery怎么實(shí)現(xiàn)一個(gè)彈出層效果
分享URL：http://muchs.cn/article46/jopheg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、、網(wǎng)站維護(hù)、ChatGPT、企業(yè)網(wǎng)站制作、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)