I tried to open a modal from another blogger page because the entry where I want it to appear is already very loaded and I do not want to add more codes. I have tried solutions that I have found but they do not work for me, I do not know if for a blog blogger it is different
Note: The modal opens perfectly from the page itself, but I do not know how to open it from another.
code:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<br />
<div class="card new-card">
<div class="panel3 panel-warning">
<!-- Default panel contents -->
<br />
<div class="panel-heading">
<b>TOUR</b></div>
<div class="panel-body">
<b>Passeig per la València de les dones republicanes.</b><br />
<a aria-controls="collapseExample" aria-expanded="false" class="btn btn-warning" data-toggle="collapse" href="https://www.blogger.com/blogger.g?blogID=3382080513517001247#collapseExample" role="button"><span class="caret"></span> Detalls</a>
<a aria-controls="collapseExample" aria-expanded="false" class="btn btn-warning" data-toggle="collapse" href="https://www.blogger.com/blogger.g?blogID=3382080513517001247#collapseHorita" role="button"><span aria-hidden="true" class="glyphicon glyphicon-time"></span>
Horari
</a>
<button aria-controls="collapseExample" aria-expanded="false" class="btn btn-warning" data-target="#collapseNoche" data-toggle="collapse" type="button"><span aria-hidden="true" class="glyphicon glyphicon-map-marker"></span>
Lloc
</button>
<br />
<div class="collapse" id="collapseExample">
<div class="well">
El recorregut plantejat s'iniciarà a la porta del col•legi a les 16 hores. Caminarem des de la plaça de Nicolás fins al carrer de La Nau
</div>
</div>
<div class="collapse" id="collapseNoche">
<div class="well">
Desde Rector</div>
</div>
<div class="collapse" id="collapseHorita">
<div class="well">
Empieza a 16:00h
</div>
</div>
<!-- Table1 -->
<br />
<table class="table table-hover">
<tbody>
<tr>
<th style="width: 40%;">COLABORA</th>
<th style="width: 60%;"><div style="text-align: right;">
PERFIL</div>
</th>
</tr>
<tr>
<td colspan="3"><ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation"><a aria-controls="Crist" data-toggle="tab" href="https://www.blogger.com/blogger.g?blogID=3382080513517001247#Crist" role="tab"><b>nombre</b></a></li>
<li role="presentation"><a aria-controls="Biblio" data-toggle="tab" href="https://www.blogger.com/blogger.g?blogID=3382080513517001247#Biblio" role="tab"><b>Bibliografia</b></a></li>
<li role="presentation"><a aria-controls="Enlaz" data-toggle="tab" href="https://www.blogger.com/blogger.g?blogID=3382080513517001247#Enlaz" role="tab"><b>Enllaços</b></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="Crist" role="tabpanel">
<h3>
</h3>
<div class="row" style="margin-top: 2px;">
<div class="col-lg-2 col-xs-6">
<img alt="Responsive image" class="img-thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Sin_foto.svg/300px-Sin_foto.svg.png" style="margin-left: 0px;" width="100%" />
</div>
<div class="col-lg-10 col-sm-6">
<h4 class="media-heading">
<b>Nombre de la persona</b></h4>
<div style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute m.
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="Biblio" role="tabpanel">
<div class="row" style="margin-top: 10px;">
<div class="col-lg-12 col-sm-4">
<div style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="Enlaz" role="tabpanel">
<div class="row" style="margin-top: 10px;">
<div class="col-lg-12 col-sm-6">
<h4 class="media-heading">
<b>leer más</b></h4>
<div style="text-align: justify;">
pero aquí ponemos solo texto.Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.
</div>
</div>
</div>
</div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>
<br /> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>