Question

我正在开发一个响应式OpenCart（1.5.2.1）主题，并使用响应式FancyBox替换了ColorBox脚本。除了这部分OpenCart脚本外，我完全可以使用它。

我想替换ColorBox部分，但我可以让它工作。

您可以找到响应式FancyBox here

<script type="text/javascript"><!--
$('#button-quote').live('click', function() {
$.ajax({
    url: 'index.php?route=checkout/cart/quote',
    type: 'post',
    data: 'country_id=' + $('select[name=\'country_id\']').val() + '&zone_id=' + $('select[name=\'zone_id\']').val() + '&postcode=' + encodeURIComponent($('input[name=\'postcode\']').val()),
    dataType: 'json',       
    beforeSend: function() {
        $('#button-quote').attr('disabled', true);
        $('#button-quote').after('<span class="wait">&nbsp;<img src="catalog/view/theme/sellegance/image/loading.gif" alt="" /></span>');
    },
    complete: function() {
        $('#button-quote').attr('disabled', false);
        $('.wait').remove();
    },      
    success: function(json) {
        $('.success, .warning, .attention, .error').remove();           

        if (json['error']) {
            if (json['error']['warning']) {
                $('#notification').html('<div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/sellegance/image/close.png" alt="" class="close" /></div>');

                $('.warning').fadeIn('slow');

                $('html, body').animate({ scrollTop: 0 }, 'slow'); 
            }   

            if (json['error']['country']) {
                $('select[name=\'country_id\']').after('<span class="error">' + json['error']['country'] + '</span>');
            }   

            if (json['error']['zone']) {
                $('select[name=\'zone_id\']').after('<span class="error">' + json['error']['zone'] + '</span>');
            }

            if (json['error']['postcode']) {
                $('input[name=\'postcode\']').after('<span class="error">' + json['error']['postcode'] + '</span>');
            }                   
        }

        if (json['shipping_method']) {
            html  = '<h2><?php echo $text_shipping_method; ?></h2>';
            html += '<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data">';
            html += '  <table class="radio">';

            for (i in json['shipping_method']) {
                html += '<tr>';
                html += '  <td colspan="3"><b>' + json['shipping_method'][i]['title'] + '</b></td>';
                html += '</tr>';

                if (!json['shipping_method'][i]['error']) {
                    for (j in json['shipping_method'][i]['quote']) {
                        html += '<tr class="highlight">';

                        if (json['shipping_method'][i]['quote'][j]['code'] == '<?php echo $shipping_method; ?>') {
                            html += '<td><input type="radio" name="shipping_method" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" id="' + json['shipping_method'][i]['quote'][j]['code'] + '" checked="checked" /></td>';
                        } else {
                            html += '<td><input type="radio" name="shipping_method" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" id="' + json['shipping_method'][i]['quote'][j]['code'] + '" /></td>';
                        }

                        html += '  <td><label for="' + json['shipping_method'][i]['quote'][j]['code'] + '">' + json['shipping_method'][i]['quote'][j]['title'] + '</label></td>';
                        html += '  <td style="text-align: right;"><label for="' + json['shipping_method'][i]['quote'][j]['code'] + '">' + json['shipping_method'][i]['quote'][j]['text'] + '</label></td>';
                        html += '</tr>';
                    }       
                } else {
                    html += '<tr>';
                    html += '  <td colspan="3"><div class="error">' + json['shipping_method'][i]['error'] + '</div></td>';
                    html += '</tr>';                        
                }
            }

            html += '  </table>';
            html += '  <br />';
            html += '  <input type="hidden" name="next" value="shipping" />';
            html += '  <input type="submit" value="<?php echo $button_shipping; ?>" class="button" />';             
            html += '</form>';

            $.colorbox({
      overlayClose: true,
      opacity: 0.5,
      width: '600px',
      height: '400px',
      href: false,
      html: html
    });
        }
    }
});

}）; // - ＆GT;

我试图替换

$.colorbox({
      overlayClose: true,
      opacity: 0.5,
      width: '600px',
      height: '400px',
      href: false,
      html: html
    });

与

$(".fancybox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        href: false,
        html: html
    });

但没有运气

Answer 1

试试这个

$.fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        content     : html
    });

如果您没有分配任何href，那么您不需要该选项。此外，content无论如何都会覆盖href。

内部带ColorBox调用的OpenCart脚本需要用Responsive FancyBox调用替换

1 个答案: