漂亮的Catch404弹出模态窗口

最新推荐文章于 2022-02-24 18:12:09 发布

转载最新推荐文章于 2022-02-24 18:12:09 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yy123.ink/frontDetail/12906

文章标签：

#javascript #开发语言 #ecmascript

网站模版专栏收录该内容

3170 篇文章

订阅专栏

本文介绍如何使用jQuery在网页加载外部资源时，通过AJAX实现动态进度显示，以改善用户等待体验。通过Yahoo YQL API获取URL状态，并在404时显示模态错误提示。

下载地址

让我们来看看jQuery在引擎下!可以看到在下面的代码片段中,最先进的代码在这个插件执行超过404的部分处理。因为我们连接到第三方网站(雅虎)来访问这个URL,将有一两秒钟的等待在我们的查询,这是如此有效的URL以及那些不是。以确保用户知道什么回事可以有用的页面上显示一个进度叠加与标签的检查URL状态. .”或类似的东西。function performAjaxCall(url,msg,container) { if(url.match("^http")){ msg.html(" (checking...)"); //connect to yahoo YQL to get a response for the URL $.getJSON("http://query.yahooapis.com/v1/public/yql?"+ "q=select * from html where url=""+ encodeURIComponent(url)+ ""&format=xml"&callback=?", function(data){ if(data.results[0]){ var data = filterData(data.results[0]); //if the url passes the test, navigate to it donav(url); } else { msg.html(" (404!)"); //otherwise display the modal error window fourPop(); } } ); }现在我们定义我们的模态窗口函数如下:function fourPop(){ var popWidth = 500; //dim[0].split("=")[1]; var popID = "404message"; $("#" + popID).fadeIn().css({ "width": Number( popWidth ) }).prepend(""); var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("#" + popID).width() + 80) / 2; //Apply Margin to Popup $("#" + popID).css({ "margin-top" : -popMargTop, "margin-left" : -popMargLeft }); //Fade in Background $("body").append("

"); . $("#fade").css({"filter" : "alpha(opacity=80)"}).fadeIn(); return false; }; //Close Popups and Fade Layer $("a.close, #fade").live("click", function() { $("#fade , .popup_block").fadeOut(function() { $("#fade, a.close").remove(); }); return false; }); }); }HTMLThis is a link to checkJavaScript$(document).ready(function(){$(".ajaxcheck").catch404();});