在 JQuery 中包含 HTML/PHP

Question

我正在使用 PHP HTML CSS 和 JQuery 的组合为一家制造公司开发一个网站。我希望用户能够单击“联系我们”按钮以打开一个模式窗口，其中包含一个销售代表表格，他们可以联系该表格以获取报价和其他此类联系信息。我已经编写了一个 PHP 文件，它将生成和格式化我有兴趣显示的所有信息，有没有办法可以将它包含到 JQuery .ModalWindow() 调用中？

jQuery:

<script type="text/javascript">
$(document).ready(function(){
$('.modalLink').ModalWindow();
$('#ContactUs').ModalWindow({
height: '750', width: '750',title: 'Does This Work?',description: 'I Want To Include the PHP here'});});
</script>

模态窗口“类”：

(function($){
    // Defining our jQuery plugin

$.fn.ModalWindow = function(prop){

    // Default parameters

    var options = $.extend({
        height : "250",
        width : "500",
        title:"Hey James isn't this slick?",
        description: "This is where we put the stuff that does the things.",
    },prop);

    return this.click(function(e){
        add_block_page();
        add_popup_box();
        add_styles();

        $('.ModalWindow').fadeIn();
    });

     function add_styles(){ 
                    /*Block page overlay*/
        var pageHeight = $(document).height();
        var pageWidth = $(window).width();

        $('.ModalWindow').css({ 
            'position':'absolute', 
            'top':'50%',
            'left':'50%',
            'margin':'-125px auto auto -250px',             
            'display':'none',
            'height': options.height + 'px',
            'width': options.width + 'px',
            'border':'1px solid #fff',
            'box-shadow': '0px 2px 7px #292929',
            '-moz-box-shadow': '0px 2px 7px #292929',
            '-webkit-box-shadow': '0px 2px 7px #292929',
            'border-radius':'10px',
            '-moz-border-radius':'10px',
            '-webkit-border-radius':'10px',
            'background': '#f2f2f2', 
            'z-index':'50',
        });
        $('.ModalClose').css({
            'position':'relative',
            'top':'0px',
            'left':'0px',
            'float':'right',
            'display':'block',
            'height':'30px',
            'width':'30px',
            'background': 'url(/PictureLibrary/ModalWindowImages/CloseButton.png) no-repeat',
        });

        $('.BlockPage').css({
            'position':'absolute',
            'top':'0',
            'left':'0',
            'background-color':'rgba(0,0,0,0.6)',
            'height':pageHeight,
            'width':pageWidth,
            'z-index':'10'
        });
        $('.InnerModalWindow').css({
            'background-color':'#fff',
            'height':(options.height - 50) + 'px',
            'width':(options.width - 50) + 'px',
            'padding':'10px',
            'margin':'15px',
            'border-radius':'10px',
            '-moz-border-radius':'10px',
            '-webkit-border-radius':'10px'
        });
    }

     function add_block_page(){
        var block_page = $('<div class="BlockPage"></div>');

        $(block_page).appendTo('body');
    }

     function add_popup_box(){
         var pop_up = $('<div class="ModalWindow"><a href="#" class="ModalClose"></a><div class="InnerModalWindow"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
         $(pop_up).appendTo('.BlockPage');

         $('.ModalClose').click(function(){
            $(this).parent().fadeOut().remove();
            $('.BlockPage').fadeOut().remove();              
         });
    }

    return this;
};

 })(jQuery);

Answer 1

添加一个 contentURL 选项，然后使用 $.ajax 抓取内容并使用 $('.ModalWindow').html(result) 填充窗口。

Answer 2

<script type="text/javascript">
(document).ready(function(){
$('.modalLink').ModalWindow();
$('#ContactUs').ModalWindow({
height: '750', width: '750',title: 'Does This Work?',description: <?php echo $description; ?>});});
</script>

不确定这是否适合你，因为这个答案很简单，但是： 如果您有生成和格式化所有将显示的信息的 php 函数。只需将该信息以字符串格式输入，您就可以直接将其回显。这显然是因为 php 是服务器端，而 html 和 JQuery 是前端。

例如： $description='<div id="container"><p>hello world<p><a href="http://google.com">google link</a></div>';