在 Magento 1.9 中单击按钮打开花式框答案

【问题标题】：Open fancy box on button click in Magento 1.9在 Magento 1.9 中单击按钮打开花式框
【发布时间】：2015-03-14 10:47:59
【问题描述】：

单击按钮时，我想在花哨的框中打开 HTML 表单。

目前表单是在页面底部打开，而不是在花式框中。

请看我的代码

布局/custommodule.xml 文件

<default>
    <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/custom_module/custommodule.js</name></action>

        <action method="addJs"><script>custom_module/jquery-1.9.0.min.js</script></action>
        <action method="addJs"><script>custom_module/jquery.fancybox.js</script></action>
        <action method="addJs"><script>custom_module/jquery.fancybox.pack.js</script></action>
        <action method="addJs"><script>custom_module/jquery.mousewheel-3.0.6.pack.js</script></action>
        <action method="addJs"><script>custom_module/jquery.noconflict.js</script></action>
        <action method="addCss"><stylesheet>css/custom_module/custommodule.css</stylesheet></action>
        <action method="addCss"><stylesheet>css/custom_module /jquery.enter code herefancybox.css</stylesheet></action>
    </reference>
</default>

用于打开 fancybox 的 custommodule.js 文件代码

function loadcustomform(reloadurl){

new Ajax.Request(reloadurl, {
    method: 'post',
    parameters: Form.serialize($('product_addtocart_form')),
    onSuccess: function(transport) {
        var json = transport.responseText.evalJSON();
        var displayString = json.message;
        if(json.success) {
            jQuery('body').append('<div id="output-div"></div>');
            jQuery('#output-div').html('');
            jQuery('#output-div').html(json.request_form);
            jQuery.fancybox({
                type: 'ajax',
                width:200,
                height:100,
                fitToView: false,
                content: jQuery('#output-div'),
                modal: false
            });
        }
    }
});

}

提示：如果我评论该行

<action method="addItem"><type>skin_js</type><name>js/lib/jquery-1.10.2.min.js</name></action>

在frontend/rwd/default/layout/page.xml 然后花哨的盒子是正确打开的。

请帮助我。谢谢。

【问题讨论】：

标签： javascript jquery html magento-1.9

【解决方案1】：

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        iframe : {
            preload: false
        }
    });
});     
</script>

<script type="text/javascript" src="http://dev.smartparcelbox.com/skin/frontend/rwd/default/js/jquery.fancybox.pack.js"></script>

【讨论】：