Including HTML/PHP in JQuery

Question

I am developing a website for a manufacturing company using a combination of PHP HTML CSS and JQuery. I want the user to be able to click on a "Contact Us" button to open a modal window with a table of sales reps that they can contact for quotes and other such contact information. I have written a PHP file that will generate and format all of the information that I am interested in displaying, is there a way that I can include this into the JQuery .ModalWindow() call?

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>

The ModalWindow "Class":

(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>

not sure if this works for you as this answer is quite trivial but : if you have your php function that generates and formats all the information that will be displayed. Just put that information in string format and you can echo it out directly. This is obviously because php is server side while html and JQuery are front-end.

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