after days of searching I found my answer here :
https://stackoverflow.com/questions/15090084/how-to-open-bootstrap-modal-as-soon-as-page-opens-if-modal-id-is-present-in-url
On page #2 that I call "page2", I have this modal which is hidden on the page because I want so :
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body text-center">
<img src="https://mysite.com/picture1.jpg">
</div>
</div>
</div>
</div>
Then, to launch the modal on page load, I place in my personal JS file (replacing $ by jQuery, because I'm on Joomla)
jQuery(document).ready(function() {
if(window.location.href==='https://mysite.com/page2#myModal'){
jQuery('#myModal').modal('show');
};
});
On page #1 or as a link on a Epub (tested), I use this :
<a alt="lien vers" href="https://mysite.com/page2#myModal" target="_blank">Link to page that launch #myModal on load</a>
This link opens a new window where myModal is automatically loaded.
When I click outside the modal, I return to the page where the modal is hidden and other elements appear.
All I have to do is change the ID of the modal I create to repeat the event.
In order to use jQuery and modal, I placed inside the index.php of my Astroid template (MyJoomla/template/my_Astroid_Template/index.php)
JHtml::_('jquery.framework');
JHtml::_('behavior.modal');
Like this
<?php
/**
* @package Astroid Framework
* @author JoomDev https://www.joomdev.com
* @copyright Copyright (C) 2009 - 2020 JoomDev.
* @license https://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
*/
// No direct access.
defined('_JEXEC') or die;
defined('_ASTROID') or die('Please install and activate <a href="https://www.astroidframework.com/" target="_blank">Astroid Framework</a> in order to use this template.');
if (file_exists(__DIR__ . "/helper.php")) {
require_once __DIR__ . "/helper.php"; // Template's Helper
}
JHtml::_('jquery.framework');
JHtml::_('behavior.modal');
$document = Astroid\Framework::getDocument(); // Astroid Document
// Output as HTML5
$this->setHtml5(true);
?>
I also added a link to jQuery.js and to my personnal js file in the custom code area of Astroid Framework, before /body tag
<!DOCTYPE html>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- End - jQuery -->
<!-- Mon JS -->
<script type="text/javaScript" src="/media/system/js/monjs.js"></script>
<!-- End - Mon JS -->
That's it you can see the result on my website : https://lise-whales.com/