Using two distinct containers for a modal

[bozdevs]

Describe your problem 🧐

Swup JS is a very nice library, thank you for that. But I need something small as infrastructure, which I could not achieve.

Think of it this way;

• /cars/ page contains a list of cars.
• /cars/model-y/ page contains detailed information and images of the car.
• When the link <a href="/cars/model-y/">...</a> is clicked on the /cars/ page, the link I have previously tagged (<div class="summary">...</div> in that page) I want to show the entire content of an element in a dropdown modal.

I wanted to use the https://swup.js.org/getting-started/demos/#fragment-support-modal feature for this. But in this case, the "from" and "to" containers conflict depending on the scenario.

For this, it is necessary to create containers differently.

For example:

containers: [
{from: "#from_container", to: "#to_container"}
]

Can I make my point? I will add the id #from_container to the <main> element of all pages. And again, I will add an empty <div id="#to_container"></div> to all pages.

If they were both the same, the following scenario would occur;

<main id="container">
...
...
</main>
<div id="container"></div>

For the above to work properly, It will just grab the #from_container and push it inside the #to_container.
Is there a way to do this like I said?

What is your question? 🙋‍♀️

It will just grab the #from_container and push it inside the #to_container.
Is there a way to do this like I said?

URL to minimal reproduction 🔗

https://swup-demo-modal-overlay-temp.replit.app/

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

What part of the linked fragment example doesn‘t work for your project? In theory, that should fit your use case perfectly. With fragments, you can define different containers for each direction, as in from/to.

[daun]

There's also a plugin readme section about the recommended markup for modal use cases.

<div id="swup" class="transition-main">

  <!-- The modal overlaid on the main content -->
  <main id="car" class="modal">
    <h1>Car Y</h1>
    <p>Lorem ipsum dolor...</p>
  </main>

  <!-- The list of cars overlaid by the modal above -->
  <section>
    <ul>
      <li><a href="/cars/x/">Car X</a></li>
      <li><a href="/cars/y/">Car Y</a></li>
      <li><a href="/cars/z/">Car Z</a></li>
    </ul>
  </section>

</div>