원격 모달이있는 부트 스트랩 3
방금 새로운 Twitter Bootstrap 릴리스 인 bootstrap 3으로 새 프로젝트를 시작했습니다. 원격 모드에서 Modal을 작동시킬 수 없습니다. 링크를 클릭하면 원격 URL의 내용과 함께 모달이 표시되기를 원합니다. 작동하지만 모달 레이아웃이 완전히 파괴됩니다.
다음은 jsfiddle에 대한 링크입니다. http://jsfiddle.net/NUCgp/5/
코드 :
<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 -->
누구나이 간단한 예제를 작동시킬 수 있습니까?
모달에 대한 원격 옵션과 관련하여 문서에서 :
원격 URL이 제공되면 콘텐츠가 jQuery의로드 메서드를 통해로드 되고 모달 요소의 루트에 삽입 됩니다 .
즉, 원격 파일은 본문에 표시하려는 내용뿐만 아니라 완전한 모달 구조를 제공해야합니다.
Bootstrap 3.1 업데이트 :
v3.1에서는 위의 동작이 변경되었으며 이제 원격 콘텐츠가 .modal-content
Boostrap 3.3 업데이트 :
이 옵션은 v3.3.0부터 사용되지 않으며 v4에서 제거되었습니다. 대신 클라이언트 측 템플릿 또는 데이터 바인딩 프레임 워크를 사용하거나 jQuery.load를 직접 호출하는 것이 좋습니다 .
부트 스트랩 3의 경우
내가 처리해야하는 워크 플로는 변경 될 수있는 URL 컨텍스트로 콘텐츠를로드하는 것이 었습니다. 따라서 기본적으로 표시하려는 기본 컨텍스트에 대해 javascript 또는 href로 모달을 설정하십시오.
$('#myModal').modal({
show: false,
remote: 'some/context'
});
모달을 파괴하는 것은 동일한 리모컨에서로드하지 않았기 때문에 저에게 효과가 없었으므로 다음을 수행해야했습니다.
$(".some-action-class").on('click', function () {
$('#myModal').removeData('bs.modal');
$('#myModal').modal({remote: 'some/new/context?p=' + $(this).attr('buttonAttr') });
$('#myModal').modal('show');
});
물론 이것은 js 라이브러리로 쉽게 리팩토링되었으며 모달을로드 할 때 많은 유연성을 제공합니다.
나는 이것이 누군가를 땜질하는 데 15 분을 절약하기를 바랍니다.
전체 모달 구조를 보내지 않으려면 다음과 같이 이전 동작을 복제 할 수 있습니다.
// 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();
});
다음은 이전 원격 로딩 동작을 복원하기 위해 BS3의 자체 구조를 사용하는 내 솔루션 (위의 몇 가지 활용)입니다. 원활해야합니다.
이해하기 쉽도록 코드 변수를 무겁고 설명 적으로 유지하겠습니다. 나는 또한 JQuery의 존재를 가정하고 있습니다. 자바 스크립트 헤비 리프터 유형은 코드를 간편하게 간소화합니다.
참고로 BS3 모달을 호출하는 링크는 다음과 같습니다.
<li><a data-toggle="modal" href="terms.html" data-target="#terms">Terms of Use</a></li>
Javascript에서 다음이 필요합니다.
// 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;
});
});
우리는 거의 다 왔습니다. 한 가지 할 수있는 일은 최대 높이로 모달 본문의 스타일을 지정하여 긴 콘텐츠가 스크롤되도록하는 것입니다.
CSS에서 다음이 필요합니다.
.modal-body{
max-height: 300px;
overflow-y: scroll;
}
참고로 모달의 HTML을 포함시킬 것입니다. 이것은 여러분이 본 모든 Bootsrap Modal 예제의 모달입니다.
<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 -->
내가 했어:
$('#myModal').on 'shown.bs.modal', (e) ->
$(e.target).find('.modal-body').load('http://yourserver.com/content')
내가 부트 스트랩 코드를 수정하는 것을 싫어하는만큼 (업그레이드가 더 어려워 짐), 다음과 같이 modal.js의 load 문에 ".find ( '. modal-body')를 추가하면됩니다.
// 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)
내가 사용하는 방법은 다음과 같습니다. 페이지에 숨겨진 DOM 요소가 필요하지 않으며 모달 부분의 href가있는 앵커 태그와 'modalTrigger'클래스 만 필요합니다. 모달이 닫히면 (숨겨 짐) 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
}());
사용하려면 모달 부분의 href로 태그를 생성하십시오.
<a href="path/to/modal-partial.html" class="modalTrigger">Open Modal</a>
또 다른 위대하고 쉬운 방법은 레이아웃에 블라인드 모달을 넣고 필요하면 호출하는 것입니다.
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");
}
및 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>
now you can simply call remote_modal('/my/url.html')
and the content gets displayed inside of the modal
I do it this way:
<!-- 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>
Here is my 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>
참고URL : https://stackoverflow.com/questions/18378720/bootstrap-3-with-remote-modal
'Program Tip' 카테고리의 다른 글
node.js에서 데이터베이스를 조롱합니까? (0) | 2020.11.06 |
---|---|
쉘 (awk, sed 등)을 사용하여 파일에서 처음 두 열을 제거하는 방법 (0) | 2020.11.06 |
이 두 비교 결과가 다른 이유는 무엇입니까? (0) | 2020.11.06 |
Ubuntu에서 PyCharm 실행기 다시 만들기 (0) | 2020.11.06 |
Ubuntu에서 JDK 1.7에서 JDK 1.8로 이동 (0) | 2020.11.06 |