Iframe alternative

Kirby 2 Questions 🤔
1

Hi,
I just want to find an iframe alternative. My goal is to open links from projects directly in an other div stuck on the same page. So I used Iframe, but I don’t have many controls on that, and it looks a little bit hacky. I’m supposing there is an other way to do that in php, like “include”, or something like that.
This is my code

<ul class="teaser cf">
    <?php foreach($projects->limit(10) as $project): ?>
    <li>
        <?php if($image = $project->images()->sortBy('sort', 'asc')->first()): ?>
        <a href="<?php echo $project->url() ?>" target="iframe1">
            <img src="<?php echo $image->url() ?>" alt="<?php echo $project->title()->html() ?>" >
        </a>
        <?php endif ?>
    </li>
    <?php endforeach ?>
</ul>

<div class="boximg">
    <iframe name="iframe1" src=""></iframe>
</div>

To resume, I want to open dynamically “project” links from “projects” into a div. The whole set looks like a one page.
THX

2

You can achieve that using AJAX calls.

3

Thank you for your reply. I could find this topic : Need help with Ajax requests with Kirby and this is exactly what I want.
1st problem : the close button doens’t work.
2nd problem : I want to be able to add nex/prev link with tags filters inside the modal.

My Jquery

var url = $('.load').data('url');
  var button = $('<button class="btn close" data-url="' + url + '" onclick="closeModal()">P</button>');
  function openUrlInModal(url, target){
    $.ajax({
	url: url,
	success: function(data) {
	$(target).append(data).addClass('modal');
	$('#modal').fadeIn('slow');
	$(target).find('section').append(button);
	}
    });
  }
  $('.load').bind('click', function(e) {
    var target = $(this).data("target");
    e.preventDefault();
    window.scrollTo(0,0);
    openUrlInModal($(this).attr('href'), target);
 });

My project.php

<?php if(!kirby()->request()->ajax()) { snippet('header'); } ?>
	<section class="<?php echo $page->uid(); ?>" id="<?php echo $page->uid(); ?>">
		<div class="section-inner">
			
			<?php foreach($page->images()->sortBy('sort', 'asc') as $image): ?>
      <figure>
        <img src="<?php echo $image->url() ?>" alt="<?php echo $page->title()->html() ?>">
      </figure>
      <?php endforeach ?>
		</div>
	</section>
 <nav class="nextprev cf" role="navigation">
      <?php if($prev = $page->prevVisible()): ?>
      <a class="prev" href="<?php echo $prev->url() ?>">&larr; previous</a>
      <?php endif ?>
      <?php if($next = $page->nextVisible()): ?>
      <a class="next" href="<?php echo $next->url() ?>">next &rarr;</a>
      <?php endif ?>
    </nav>
<?php if(!kirby()->request()->ajax()) { snippet('footer'); } ?>

My projects.php

<ul class="teaser cf">
  <?php foreach($projects->limit(10) as $project): ?>
  <li>
      <?php if($image = $project->images()->sortBy('sort', 'asc')->first()): ?>
    <figure>
     <a class="load" data-target="#modal" href="<?php echo $project->url() ?>">
    
      <img src="<?php echo $image->url() ?>" alt="<?php echo $project->title()->html() ?>" >

        <figcaption>
            <div class="num"><?php echo $project->num() ?></div>
            <?php if($project->vente()->bool()) :?>
 <span class="rond"><img src="assets/css/target.svg"></span>
<?php endif ?>
          </figcaption> 
    </a>
    </figure>
      <?php endif ?>
  </li>
  <?php endforeach ?>
</ul>

<div id="modal"></div>

And my tag filter

 <ul class="tags">
        <?php $pageTags = $page->tags()->split(); ?>
        <?php $p = kirby()->request()->params()->tag(); ?>

        <?php foreach($tags as $tag): ?>
        <li class="tagsli"> 
            <a <?= in_array($tag, $pageTags)? 'class="active"':'' ?> <?php ecco($tag == $p, 'class="active"') ?> href="<?php echo url('projects/' . url::paramsToString(['tag' => $tag])) ?>">
                <?php echo html($tag) ?>
            </a>
        </li>
        <?php endforeach ?>
    </ul>

Sorry for the long post, I just want to be clear. Could you tell me a solution ? Thanks a lot