This example shows how to dynamically load HTML content from PHP into an HTML element using JQuery and AJAX.
The modal aspect means the user needs to deal with the popup before continuing any interaction with the web page.
Start today with easy to learn courses that quicky build your website skills!
You might want to do this when the main page content has all the needed SEO material but there is a lot of additional content such as course or code files that can be loaded on visitor demand. For example a course page or tutorial page where you have all the summary and details about the course or tutorial that would satisfy SEO. Then you can have the user load the particular items they want.
This example provides the basic elements in JQuery, HTML, AJAX and PHP for a potential architecture to do that and then build upon further.
This example has three buttons. Two are for loading content and one for clearing so we can play a bit while testing. Do not expect the user will need to clear the data.
The JQuery ajax method in wrapped in a generic Javascript function to send NVP data and receive HTML content calling a success or fail function in the presentation level Javascript code.
The PHP on the server side has a simple controller and loads content from text files based on the AJAX request data.