javascript - Click go to modal section

Question

this is what I want to achieve:

The modal has 4 sections, each section loads it´s content dinamically using .load() to the container on the right.

The problem is that I have a menu in the footer that opens the modal, and should put the user in the correct section:

I just don´t know how to make it, for example if I click on the footer menu 'metodos de pago' it open the modal in that specified section. any ideas on how to do it?

this is my script to load the modal:

function loadmodal(){
     $('.info_modal').fadeIn();
}

this is my script to load the content of the sections in the modal after clicking on the left menu:

function loadcontent(){
     $('.info_modal_content').load('includes/text2.html');
}

markup of the modal:

    <div class="info_modal">
        <div class="info_modal_container">
            <h2>Guia de compra</h2>
            <hr>
            <ul class="info_modal_menu">
                <li>
                    <a href="javascript:void(0)">Como Comprar</a>
                </li>
                <li>
                    <a href="javascript:void(0)" onclick="loadcontent()">Metodos de pago</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Cambios y devoluciones</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Tarjeta regalo</a>
                </li>
            </ul>
            <div class="info_modal_content">
                <h2>TARGETA PUEDES COMPRARLA EN...</h2>
                <p>Tu tarjeta puede ser rechazada por una de las</p>
            </div>

            <a href="javascript:void(0)" class="close_contact" onclick="closecontactmodal()"></a>
        </div>
    </div>

Answer 1

为什么不通过 URL 进行初始加载？

假设您的页脚结构如下：

<footer>
  <ul>
    <li><a href="text1.html" class="openModal">Text 1</a></li>
    <li><a href="text2.html" class="openModal">Text 2</a></li>
    <li><a href="text3.html" class="openModal">Text 3</a></li>
    <li><a href="text4.html" class="openModal">Text 4</a></li>
  </ul>
</footer>

然后您可以将处理程序附加到.openModal：

$('.openModal').on('click', function(e){
  e.preventDefault();

  var toLoad = $(this).attr('href');

  $('.info_modal_content').load(toLoad);

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