Modal requirements

[ionurboz]

Is it possible to set swup to insert the content of one selector from the target page into another selector within the current page?

Example:

Current page: 
<div id="modal"></div>
<a href="target.html" foo="#bar">Get</a>

Target page:
<div>
  <section>
    <div id="bar">Hello</div>
  </section>
 </div>

After click the "<a>";

Current page:
<div id="modal">
  <div id="bar">Hello</div>
</div>
<a href="target.html" foo="#bar">Get</a>

Is it possible to do this?

[daun]

That could probably be done with clever use of container selectors. If e.g. both had the same id such as #content, it would choose which ever one it finds on the new page.

If they differ and you can't change the markup, you could combine both into a single container like #main, #modal. That might work since swup will pick the first element to match the selector. If it finds #main first, it will use that, orherwise it use #modal.

For snything more complex, I'd suggest looking into the Fragment Plugin which deals exactly with your type of dynamic containers.