Question

我看到Colorbox可以加载外部HTML，但只加载引用的整个页面。我只想注入一些登录和注册表单所需的页面部分，然后仅在进程成功时启动Colorbox。

我勾勒出以下内容......

$('.gateway').click(function(e) {
  var _link = $(this);
  var $error = $('<div id="error" />');
  var $modal = $('<div id="modal" />');

  var $url = _link.attr('href') + ' #gateway'; 
    // I only want to load #gateway from the target page

  $modal.load($url, function (response, status, xhr) {
    if (status == 'success') {
      $('body').append($modal);
      $modal.hide().colorbox({
        width:'60%', 
        inline:true, 
        href:'#gateway',
        onLoad:function(){ $modal.show(); },
        onCleanup:function(){ 
          $modal.remove(); 
          $error.remove(); 
        }
      });
    }
    if (status == 'error') {
      var $msg = 'Sorry, something went wrong: ';
      $error.html($msg + xhr.status + ' ' + xhr.statusText);
      // Do something with this message!
    }
  });

  e.preventDefault();
});

$modal正在使用正确的#gateway内容注入正常但Colorbox不执行任何操作。我觉得我在这里破坏了我的事件和方法。我猜测Colorbox方法（是正确的术语吗？）只响应click事件而不是后续成功加载事件。

如果有人可以帮我让Colorbox回复加载事件或者向我展示一种更优雅的方式来实现我的目标，我将不胜感激！

Answer 1

ColorBox使用jQuery的加载方法来实现它的ajax功能，因此您可以使用它来从HTML文档中提取片段。而不是你发布的所有内容，试试这个：

$('.gateway').colorbox({
    width:'60%', 
    href: function(){ return $(this).attr('href') + ' #gateway';}
});

如果ajax请求不成功，colorbox会给出一条消息说明。如果您决定需要自定义错误处理，则可以对HTML片段进行ajax / load请求，并将其直接传递给colorbox的“html”属性，而不是将其添加到DOM并尝试使用内联属性。

成功注射ajax后如何激活Colorbox？

1 个答案: