Bootstrap 3 ze zdalnym Modalem
Właśnie zacząłem nowy projekt z nowym wydaniem Twitter Bootstrap: bootstrap 3. Nie mogę uruchomić modalu w trybie zdalnym. Po prostu chcę, aby po kliknięciu na link pokazuje modal z zawartością ZDALNEGO ADRESU url. Działa, ale układ modalny jest całkowicie zniszczony.
Oto link do jsfiddle: http://jsfiddle.net/NUCgp/5/
Kod:
<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">×</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 -->
Czy ktoś może sprawić, że ten prosty przykład zadziała ?
9 answers
Odnośnie opcji remote dla modali, z docs :
Jeśli podany jest Zdalny adres URL, zawartość zostanie załadowana poprzez załadowanie jQuery method and injected into the root of the modal element .
Oznacza to, że plik zdalny powinien zapewniać pełną strukturę modalną, a nie tylko to, co chcesz wyświetlić na ciele.
Aktualizacja Bootstrap 3.1:
W wersji 3.1 powyższe zachowanie zostało zmienione i teraz zdalna zawartość jest ładowana do .modal-content
Zobacz też Demo fiddle
Boostrap 3.3 Update:
Ta opcja jest przestarzała od wersji 3.3.0 i została usunięta w wersji 4. zamiast tego zalecamy użycie szablonów po stronie klienta lub frameworka wiązania danych, lub wywołanie jQuery.załaduj siebie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-08 11:57:03
Dla Bootstrap 3
Przepływ pracy, z którym miałem do czynienia, polegał na wczytywaniu treści z kontekstem url, który mógł się zmienić. Więc domyślnie skonfiguruj modal za pomocą javascript lub href dla domyślnego kontekstu, który chcesz pokazać:
$('#myModal').modal({
show: false,
remote: 'some/context'
});
Niszczenie modala mi nie pomogło, bo nie ładowałem z tego samego pilota, więc musiałem:
$(".some-action-class").on('click', function () {
$('#myModal').removeData('bs.modal');
$('#myModal').modal({remote: 'some/new/context?p=' + $(this).attr('buttonAttr') });
$('#myModal').modal('show');
});
To oczywiście było łatwo zrefakturowane w bibliotekę js i daje dużą elastyczność przy ładowaniu modów
I hope to oszczędza komuś 15 minut majsterkowania.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-25 14:35:42
Jeśli nie chcesz wysyłać pełnej struktury modalnej, możesz odtworzyć stare zachowanie robiąc coś takiego:
// 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();
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-27 11:06:34
Oto moje rozwiązanie (wykorzystując kilka powyższych), które wykorzystuje własną strukturę BS3 do ponownego zainstalowania starego Zdalnego Ładowania. Powinno być bezproblemowo.
Zamierzam zachować zmienną kodu ciężkie i opisowe, aby zachować rzeczy zrozumiałe. Zakładam również obecność JQuery. Javascript heavy lifter types będzie zręcznie usprawnić kod.
Dla odniesienia tutaj jest link, który wywołuje BS3 modal:
<li><a data-toggle="modal" href="terms.html" data-target="#terms">Terms of Use</a></li>
W Twoim Javascript będziesz potrzebował podążam.
// 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;
});
});
Już prawie jesteśmy. Jedną z rzeczy, które możesz chcieć zrobić, to styl modalnego ciała o maksymalnej wysokości, aby długa zawartość przewijała się.
W CSS będziesz potrzebował:
.modal-body{
max-height: 300px;
overflow-y: scroll;
}
Dla przypomnienia dołączę modalny HTML, który jest podróbką każdego modalnego przykładu Bootsrap, jaki kiedykolwiek widziałeś:
<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">×</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 -->
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-08 02:33:47
Zrobiłem to:
$('#myModal').on 'shown.bs.modal', (e) ->
$(e.target).find('.modal-body').load('http://yourserver.com/content')
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-07 03:17:30
O ile nie lubię modyfikować kodu Bootstrap (utrudnia aktualizację), możesz po prostu dodać ".find (".modal-body") do instrukcji load w modal.js jak następuje:
// 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)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-03 18:26:12
Oto metoda, której używam. Nie wymaga żadnych ukrytych elementów DOM na stronie, a jedynie wymaga znacznika anchor z href modal partial i klasy 'modalTrigger'. Gdy modal jest zamknięty (ukryty) jest usuwany z 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
}());
Aby użyć, wystarczy utworzyć znacznik a z href części modalnej:
<a href="path/to/modal-partial.html" class="modalTrigger">Open Modal</a>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-22 08:44:30
Innym świetnym i łatwym sposobem jest miećślepy modal w układzie i nazwać go, jeśli trzeba.
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");
}
I twój 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>
Teraz możesz po prostu wywołać remote_modal('/my/url.html')
i zawartość zostanie wyświetlona wewnątrz modalu
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-24 07:23:07
Robię to w ten sposób:
<!-- 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>
Oto mój 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-22 15:05:04