twitter-bootstrap - div - tooltip bootstrap 3

Bootstrap 3 con Modal remoto

Question

Acabo de comenzar un nuevo proyecto con la nueva versión de Twitter Bootstrap: bootstrap 3. No puedo hacer que el Modal funcione en el modo remoto. Solo quiero que cuando haga clic en un enlace, se muestre el modal con el contenido de la URL remota. Funciona pero el diseño modal está completamente destruido.

Aquí hay un enlace a jsfiddle: http://jsfiddle.net/NUCgp/5/

El código :

<a data-toggle="modal" href="http://fiddle.jshell.net/Sherbrow/bHmRB/0/show/" data-target="#myModal">Click me !</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body"><div class="te"></div></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

¿Alguien puede hacer que este simple ejemplo funcione?

Answer 1

Aquí está mi solución (aprovechando algunas más arriba) que hace uso de la propia estructura de BS3 para restablecer el antiguo comportamiento de carga remota. Debe ser transparente.

Voy a mantener la variable de código pesada y descriptiva para que todo sea comprensible. También estoy asumiendo la presencia de JQuery. Los tipos de levantadores pesados ​​de Javascript simplificarán el código fácilmente.

Como referencia, aquí hay un enlace que invoca un modal BS3:

<li><a data-toggle="modal" href="terms.html" data-target="#terms">Terms of Use</a></li>

En youre Javascript necesitarás lo siguiente.

// Make sure the DOM elements are loaded and accounted for
$(document).ready(function() {
// Match to Bootstraps data-toggle for the modal
// and attach an onclick event handler
$(''a[data-toggle="modal"]'').on(''click'', function(e) {
// From the clicked element, get the data-target arrtibute
// which BS3 uses to determine the target modal
var target_modal = $(e.currentTarget).data(''target'');
// also get the remote content''s URL
var remote_content = e.currentTarget.href;
// Find the target modal in the DOM
var modal = $(target_modal);
// Find the modal''s <div class="modal-body"> so we can populate it
var modalBody = $(target_modal + '' .modal-body'');
// Capture BS3''s show.bs.modal which is fires
// immediately when, you guessed it, the show instance method
// for the modal is called
modal.on(''show.bs.modal'', function () {
// use your remote content URL to load the modal body
modalBody.load(remote_content);
}).modal();
// and show the modal
// Now return a false (negating the link action) to prevent Bootstrap''s JS 3.1.1
// from throwing a ''preventDefault'' error due to us overriding the anchor usage.
return false;
});
});

Estamos a punto de llegar allí. Una cosa que querrá hacer es diseñar el cuerpo modal con una altura máxima, para que el contenido largo se desplace.

En tu CSS, necesitarás lo siguiente:

.modal-body{
max-height: 300px;
overflow-y: scroll;
}

Solo por referencia, incluiré el HTML modal, que es una copia de cada ejemplo modal de Bootsrap que hayas visto:

<div id="terms" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 id="termsLabel" class="modal-title">TERMS AND CONDITIONS</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 2

En cuanto a la opción remota para modales, de los documentos :

Si se proporciona una URL remota, el contenido se cargará a través del método de carga de jQuery y se inyectará en la raíz del elemento modal .

Eso significa que su archivo remoto debe proporcionar la estructura modal completa, no solo lo que desea mostrar en el cuerpo.

Actualización de Bootstrap 3.1:

En v3.1, el comportamiento anterior se modificó y ahora el contenido remoto se carga en .modal-content

Vea este violín de demostración

Actualización de Boostrap 3.3:

Esta opción está en desuso desde v3.3.0 y se ha eliminado en v4. En su lugar, recomendamos utilizar plantillas del lado del cliente o un marco de enlace de datos, o llamar a jQuery.load usted mismo.

Answer 3

Este es el método que uso. No requiere ningún elemento DOM oculto en la página, y solo requiere una etiqueta de anclaje con el href del modal parcial y una clase de ''modalTrigger''. Cuando el modal está cerrado (oculto), se elimina del DOM.

 (function(){
// Create jQuery body object
var $body = $(''body''),
// Use a tags with ''class="modalTrigger"'' as the triggers
$modalTriggers = $(''a.modalTrigger''),
// Trigger event handler
openModal = function(evt) {
var $trigger = $(this), // Trigger jQuery object
modalPath = $trigger.attr(''href''), // Modal path is href of trigger
$newModal, // Declare modal variable
removeModal = function(evt) { // Remove modal handler
$newModal.off(''hidden.bs.modal''); // Turn off ''hide'' event
$newModal.remove(); // Remove modal from DOM
},
showModal = function(data) { // Ajax complete event handler
$body.append(data); // Add to DOM
$newModal = $(''.modal'').last(); // Modal jQuery object
$newModal.modal(''show''); // Showtime!
$newModal.on(''hidden.bs.modal'',removeModal); // Remove modal from DOM on hide
};
$.get(modalPath,showModal); // Ajax request
evt.preventDefault(); // Prevent default a tag behavior
};
$modalTriggers.on(''click'',openModal); // Add event handlers
}());

Para usar, simplemente crea una etiqueta a con el href del parcial modal:

<a href="path/to/modal-partial.html" class="modalTrigger">Open Modal</a>

Answer 4

Hice esto:

$(''#myModal'').on ''shown.bs.modal'', (e) ->
$(e.target).find(''.modal-body'').load(''http://yourserver.com/content'')

Answer 5

Lo hago de esta manera:

<!-- global template loaded in all pages // -->
<div id="NewsModal" class="modal fade" tabindex="-1" role="dialog" data-ajaxload="true" aria-labelledby="newsLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="newsLabel"></h3>
</div>
<div class="modal-body">
<div class="loading">
<span class="caption">Loading...</span>
<img src="/images/loading.gif" alt="loading">
</div>
</div>
<div class="modal-footer caption">
<button class="btn btn-right default modal-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Aquí está mi a href:

<a href="#NewsModal" onclick="remote=/'modal_newsfeed.php?USER=''.trim($USER).''&FUNCTION=''.trim(urlencode($FUNCTIONCODE)).''&PATH_INSTANCE=''.$PATH_INSTANCE.''&ALL=ALL/'
remote_target=/'#NewsModal .modal-body/'" role="button" data-toggle="modal">See All Notifications <i class="m-icon-swapright m-icon-dark"></i></a>

Answer 6

Otra manera excelente y fácil es tener un modal ciego en su diseño y llamarlo si es necesario.

JS

 var remote_modal = function(url) {
// reset modal body with a spinner or empty content
spinner = "<div class=''text-center''><i class=''fa fa-spinner fa-spin fa-5x fa-fw''></i></div>"
$("#remote-modal .modal-body").html(spinner)
$("#remote-modal .modal-body").load(url);
$("#remote-modal").modal("show");
}

y tu HTML

 <div class=''modal fade'' id=''remote-modal''>
<div class=''modal-dialog modal-lg''>
<div class=''modal-content''>
<div class=''modal-body''></div>
<div class=''modal-footer''>
<button class=''btn btn-default''>Close</button>
</div>
</div>
</div>
</div>
</body>

ahora puedes simplemente llamar a remote_modal(''/my/url.html'') y el contenido se muestra dentro del modal

Answer 7

Para Bootstrap 3

El flujo de trabajo con el que tuve que lidiar fue cargar contenido con un contexto de URL que podría cambiar. Por lo tanto, configure su modal de manera predeterminada con javascript o href para el contexto predeterminado que desea mostrar:

$(''#myModal'').modal({
show: false,
remote: ''some/context''
});

Destruir el modal no funcionaría para mí porque no cargaba desde el mismo control remoto, así que tuve que:

$(".some-action-class").on(''click'', function () {
$(''#myModal'').removeData(''bs.modal'');
$(''#myModal'').modal({remote: ''some/new/context?p='' + $(this).attr(''buttonAttr'') });
$(''#myModal'').modal(''show'');
});

Esto, por supuesto, fue fácilmente refactorizado en una biblioteca js y te da mucha flexibilidad con cargar modals

Espero que esto le ahorre a alguien 15 minutos de retoques.

Answer 8

Por mucho que no me gusta modificar el código de Bootstrap (hace que la actualización sea más difícil), simplemente puede agregar ".find (''. Modal-body'') a la declaración de carga en modal.js de la siguiente manera:

// original code
// if (this.options.remote) this.$element.load(this.options.remote)
// modified code
if (this.options.remote) this.$element.find(''.modal-body'').load(this.options.remote)

Answer 9

Si no desea enviar la estructura modal completa, puede replicar el comportamiento anterior haciendo algo como esto:

// this is just an example, remember to adapt the selectors to your code!
$(''.modal-link'').click(function(e) {
var modal = $(''#modal''), modalBody = $(''#modal .modal-body'');
modal
.on(''show.bs.modal'', function () {
modalBody.load(e.currentTarget.href)
})
.modal();
e.preventDefault();
});