My goal is to create a modal with 4 sections, each loading its content dynamically using the .load() function to the container on the right side.
The challenge I'm facing is that I have a footer menu that triggers the modal to open, and I need it to direct the user to the specific section they clicked on.
For example, if a user clicks on the 'payment methods' option in the footer menu, the modal should open directly in that particular section. Any suggestions on how to achieve this?
This is the script I use to open the modal:
function loadmodal(){
$('.info_modal').fadeIn();
}
And here's the script for loading the content of the sections within the modal after clicking on the left menu:
function loadcontent(){
$('.info_modal_content').load('includes/text2.html');
}
Here is the markup structure of the modal:
<div class="info_modal">
<div class="info_modal_container">
<h2>Shopping Guide</h2>
<hr>
<ul class="info_modal_menu">
<li>
<a href="javascript:void(0)">How to Buy</a>
</li>
<li>
<a href="javascript:void(0)" onclick="loadcontent()">Payment Methods</a>
</li>
<li>
<a href="javascript:void(0)">Exchanges and Returns</a>
</li>
<li>
<a href="javascript:void(0)">Gift Card</a>
</li>
</ul>
<div class="info_modal_content">
<h2>WHERE TO BUY YOUR GIFT CARD...</h2>
<p>Your card may be rejected by one of the retailers.</p>
</div>
<a href="javascript:void(0)" class="close_contact" onclick="closecontactmodal()"></a>
</div>
</div>