漂亮的Catch404弹出模态窗口

让我们来看看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('<a class="close" href="#"><img alt="Close" title="Close Window" class="btn_close" src="images/close_pop.png"></a>');
  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('
<div id="fade"> </div>
'); .
  $('#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;
 });
    });
  }


HTML
<a class="ajaxcheck" href="somepage.html">
This is a link to check
</a>


JavaScript
$(document).ready(function()
{
$(".ajaxcheck").catch404();
});