0

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">&times;</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 />
&nbsp;<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>
2
  • Intenta colocarnos algo de lo que hayas intentado. Eso facilitara el trabajo :)
    – GDP
    Commented el 8 sept. 2017 a las 6:05
  • Mon63, veo que eres el mismo usuario que User58888. Si quieres juntar las dos cuentas has de pulsar Aqui y seleccionar en el formulario "Necesito combinar perfiles de usuario"
    – lois6b
    Commented el 12 sept. 2017 a las 7:04

1 respuesta 1

0

Lo que tienes entre manos es la librería/framework de bootstrap,

Para realizar modales funcionales en cualquier página debe cumplir lo siguiente:

Un elemento con estos atributos;

Que funcionalidad toggle va ha realizar:

data-toggle="modal" 

y quien es el modal

data-target="#myModal"

Por último el target, contiene un atributo ID importante que hace referencia:

class="modal fade" id="myModal" tabindex="-1" role="dialog"

Normalmento es un elemento div quien contiene estos atributos junto a su estructura.

Creo que la versión de boostrap que utilizas es la 3.3.7 porque utiliza paneles...

Enlace de ayuda bootstrap ( Modales )

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.