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() ?>">← previous</a>
<?php endif ?>
<?php if($next = $page->nextVisible()): ?>
<a class="next" href="<?php echo $next->url() ?>">next →</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