Including HTML/PHP in JQuery -
i developing website manufacturing company using combination of php html css , jquery. want user able click on "contact us" button open modal window table of sales reps can contact quotes , other such contact information. have written php file generate , format of information interested in displaying, there way can include jquery .modalwindow() call?
jquery:
<script type="text/javascript"> $(document).ready(function(){ $('.modallink').modalwindow(); $('#contactus').modalwindow({ height: '750', width: '750',title: 'does work?',description: 'i want include 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 slick?", description: "this put stuff 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);
add contenturl option, , use $.ajax grab content , use $('.modalwindow').html(result) populate window.
Comments
Post a Comment