He intentado abrir un modal desde otra página de blogger porque la entrada donde quiero que aparezca está ya muy cargada y no quisiera añadir más códigos. He probado soluciones que he encontrado pero no me funcionan, no sé si para un blog de blogger es distinto
Nota: el modal se abre perfecto desde la propia página, pero no sé como hacer que se abra desde otra.
código:
<!-- 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>