부트스트랩 모달에 포함된 경우 Select2가 작동하지 않습니다.
부트스트랩 모달에서 select2(입력)를 사용하면 아무것도 입력할 수 없습니다.장애인 같다고요?modal select2 밖에서는 정상적으로 작동합니다.
작동 예: http://jsfiddle.net/byJy8/1/ 코드:
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">
<form class="form-horizontal">
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="vdn_number">Numer</label>
<div class="controls">
<!-- seleect2 -->
<input name="vdn_number" type="hidden" id="vdn_number" class="input-large" required="" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
제이에스
$("#vdn_number").select2({
placeholder: "00000",
minimumInputLength: 2,
ajax: {
url: "getAjaxData/",
dataType: 'json',
type: "POST",
data: function (term, page) {
return {
q: term, // search term
col: 'vdn'
};
},
results: function (data) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return {results: data};
}
}
});
답변:
여기서 빠른 해결책을 찾을 수 있습니다.
그리고 여기에 '올바른 방법'이 있습니다.부트스트랩 모달에 포함된 경우 Select2가 작동하지 않습니다.
좋아요, 할 일이 있어요.
바꾸다
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">
로.
<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">
(모달에서 탭 인덱스="-1" 제거)
선택2 v4의 경우:
사용하다dropdownParent드롭다운을 HTML 본문이 아닌 모달 대화 상자에 첨부합니다.
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<select id="select2insidemodal" multiple="multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
</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>
</div>
</div>
<script>
$(document).ready(function() {
$("#select2insidemodal").select2({
dropdownParent: $("#myModal")
});
});
</script>
이렇게 하면 Select2 드롭다운이 HTML 본문(기본값)이 아닌 모달의 DOM에 포함되도록 부착됩니다.https://select2.org/dropdown#dropdown-placement 을 참조하십시오.
select2를 위해 이 온기트허브에 대한 해결책을 찾았습니다.
https://github.com/ivaynberg/select2/issues/1436
부트스트랩 3의 솔루션은 다음과 같습니다.
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
는 의트랩이 4름이로 을 변경했습니다.enforceFocus to 는법방._enforceFocus대신 패치를 적용해야 합니다.
$.fn.modal.Constructor.prototype._enforceFocus = function() {};
위 링크에서 복사한 설명:
부트스트랩은 포커스된 요소가 오버레이 자체인지 아니면 오버레이의 하위 요소인지 확인하는 이벤트에서 수신기를 포커스에 등록합니다. 그렇지 않으면 오버레이에 다시 포커스를 맞춥니다.select2 드롭다운이 본문에 부착되어 있으면 텍스트 필드에 아무것도 입력할 수 없습니다.
이벤트를 모달에 등록하는 enforceFocus 함수를 덮어씀으로써 이 문제를 빠르게 해결할 수 있습니다.
부모 드롭다운을 설정합니다.모달 내의 .modal-content에 설정해야 했습니다. 그렇지 않으면 텍스트가 중심이 됩니다.
$("#product_id").select2({
dropdownParent: $('#myModal .modal-content')
});
제거하기만 하면 됩니다.tabindex="-1" 스타일 overflow:hidden
다음은 예입니다.
<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;">
<!---content modal here -->
</div>
.select2-close-mask{
z-index: 2099;
}
.select2-dropdown{
z-index: 3051;
}
이것은 select24.0.0을 사용한 나의 솔루션입니다.select2.css 가져오기 바로 아래에 있는 css를 재정의하면 됩니다.z-index가 대화상자나 모달보다 큰지 확인하십시오.저는 기본적인 것들에 2000개요.왜냐하면 제 대화상자의 z-index는 약 1000개이기 때문입니다.
도움이 된 답변은 다음과 같습니다. https://github.com/select2/select2-bootstrap-theme/issues/41
$('select').select2({
dropdownParent: $('#my_amazing_modal')
});
또분리필없습다니요가할을 제거할.tabindex.
공식 select2 문서에 따르면 부트스트랩 모델이 모달 외부의 다른 요소에서 포커스를 훔치는 경향이 있기 때문에 이 문제가 발생합니다.
기본적으로 Select2는 드롭다운 메뉴를 요소에 부착하며 요소는 "모달 외부"로 간주됩니다.
대신 드롭다운 부모 설정을 사용하여 드롭다운을 모달 자체에 연결합니다.
$('#myModal').select2({
dropdownParent: $('#myModal')
});
참조: https://select2.org/troubleshooting/common-problems
저의 경우 두 가지 모델에서 동일한 문제가 발생했으며 다음을 사용하여 모두 해결되었습니다.
$('.select2').each(function() {
$(this).select2({ dropdownParent: $(this).parent()});
})
프로젝트 이슈 #41에서와 같이 한 사용자가 말했습니다.
문제가 업데이트를 했습니다. 업데이트 중입니다.z-index위해서.select2-container그 묘기를 부려야 합니다.모달을 사용해야 합니다.z-indexselect2보다 낮습니다.
.select2-container {
z-index: 99999;
}
업데이트됨:위의 코드가 제대로 작동하지 않는 경우 @breq가 제안한 대로 모달에서 탭 인덱스를 제거합니다.
이 문제는 나를 위한 단일 질의 기능으로 해결되었습니다.
$('#myModal .select2').each(function() {
var $p = $(this).parent();
$(this).select2({
dropdownParent: $p
});
});
부트스트랩 3 버전의 경우 문서 준비 시 이 코드를 사용하십시오.
$(document).ready(function(){
$.fn.modal.Constructor.prototype.enforceFocus = function () {};
});
저도 비슷한 문제가 있어서 해결했습니다.
$('#CompId').select2({
dropdownParent: $('#AssetsModal')
});
및 모드(선택 포함)
<div class="modal fade" id="AssetsModal" role="dialog"
aria-labelledby="exampleModalCenterTitle"
aria-hidden="true" style="overflow:hidden;" >
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle" >Добави активи</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form role="form" action="?action=dma_act_documents_assets_insert&Id=<?=$ID?>"
method="post" name="dma_act_documents_assets_insert"
id="dma_act_documents_assets_insert">
<div class="form-group col-sm-12">
<label for="recipient-name" class="col-form-label">Актив:</label>
<span style="color: red">*</span>
<select class="form-control js-example-basic-single col-sm-12"
name="CompId" id="CompId">
<option></option>
</select>
</div>
</form>
</div>
</div>
</div>
하지만 선택 메뉴가 다른 필드보다 작은 이유를 모르겠습니다.
select2를 사용하기 시작하면 그렇게 시작합니다.제가 그것을 제거하면, 모든 것이 정상입니다.
그것에 대한 경험을 공유할 사람이 있습니까?
감사해요.
$('.modal').on('shown.bs.modal', function (e) {
$(this).find('.select2me').select2({
dropdownParent: $(this).find('.modal-content')
});
})
select2.dll 파일 변경
z-index: 9998;
...
z-index: 9999;
...
z-index: 10000;
로.
z-index: 10000;
...
z-index: 10001;
...
z-index: 10002;
승인된 답변을 완료하기 위해 탭 인덱스 요소가 어떻게 작동하는지 더 잘 이해하기 위해:
탭 인덱스 글로벌 속성은 요소가 입력 포커스를 가질 수 있는지(포커스 가능한지), 순차적 키보드 탐색에 참여해야 하는지, 참여할 경우 어떤 위치에 있는지를 나타내는 정수입니다.과 같은 몇 값을 할 수 .
의 값은 있어야 순차적인 을 통해 할 수 을 의미합니다. - 음 수 값 요 초 은 순 하 키 탐 의 다 니 합 미 함 수 없 을 야 어 도 할 통 달 차 인 해 적 을 색 보 소 드 만 가 지 점 맞 을 출 있 어 야 수 ▁- ▁means ▁negative ▁should 다 니 ▁- ▁value ▁that 합 ▁navig 의 미
맞추고 인 키보드 할 수 있어야 하지만, 됩니다. -0 요소 초 맞 수 있 순 탐 키 수 있 한 의 야 것 어 지 하 플 의 순 정 규 다 니 됩 의 해 에 약 대 상 폼 랫 적 는 서 만 은 미 는 다 을 보 통 색 해 드 을 가 차 달 점 할 고
- 양의 값은 순차적인 키보드 탐색을 통해 초점을 맞추고 도달할 수 있어야 합니다. 상대적 순서는 속성 값에 의해 정의됩니다. 순차적으로 증가하는 탭 인덱스 수를 따릅니다.여러 요소가 동일한 탭 색인을 공유하는 경우, 해당 요소의 상대적 순서는 문서의 상대적 위치를 따릅니다.
원본 : Mozilla Devlopper Network
부트스트랩 4.0을 서버측(인라인 또는 json 데이터)과 함께 사용하려면 다음을 모두 추가해야 합니다.
$.fn.modal.Constructor.prototype._enforceFocus = function() {};
그런 다음 모달이 열려 있으면 선택2를 만듭니다.
// when modal is open
$('.modal').on('shown.bs.modal', function () {
$('select').select2({
// ....
});
});
select2 입력을 클릭하는 동안 부트스트랩 모달을 숨기는 iPad 키보드에 문제가 있는 경우, 초기화 후 다음 규칙을 추가하여 이 문제를 해결할 수 있습니다.select2 력입::
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
var styleEl = document.createElement('style'), styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
document.body.scrollTop = 0; // Only for Safari
}
https://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475 에서 발췌
편집: 옵션이 제대로 표시되지 않으면 다음을 사용해야 합니다.dropdownParent할 때 속성 성속시를 초기화할 select2:
$(".select2").select2({
dropdownParent: $("#YOURMODALID")
});
행운을 빕니다.
제가 작성한 @pimarco 답변에 따르면, 이 솔루션은 완벽하지 않지만 select2 포커스 문제를 해결하고 모달 내부에서 작동하는 탭 시퀀스를 유지합니다.
$.fn.modal.Constructor.prototype.enforceFocus = function () {
$(document)
.off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length && !$(e.target).closest('.select2-dropdown').length) {
this.$element.trigger('focus')
}
}, this))
}
저는 프로젝트에서 일반적으로 오버로드를 통해 이 문제를 해결했습니다.select2-parent. 이제 Parent가 없는지, 유형의 되는지 확인합니다.div.modal이 경우 해당 모달을 드롭다운의 부모로 추가합니다.
이렇게 하면 select2-input-box를 만들 때마다 지정할 필요가 없습니다.
(function(){
var oldSelect2 = jQuery.fn.select2;
jQuery.fn.select2 = function() {
const modalParent = jQuery(this).parents('div.modal').first();
if (arguments.length === 0 && modalParent.length > 0) {
arguments = [{dropdownParent: modalParent}];
} else if (arguments.length === 1
&& typeof arguments[0] === 'object'
&& typeof arguments[0].dropdownParent === 'undefined'
&& modalParent.length > 0) {
arguments[0].dropdownParent = modalParent;
}
return oldSelect2.apply(this,arguments);
};
// Copy all properties of the old function to the new
for (var key in oldSelect2) {
jQuery.fn.select2[key] = oldSelect2[key];
}
})();
제다한을 합니다.tabindex="-1" 이 가 있었습니다이 해결책을 확인해보니 효과가 있었습니다.
참조: https://github.com/select2/select2-bootstrap-theme/issues/41
이것은 모두에게 효과가 있습니다.
body .select2-container {
z-index: 9999 !important;
}
페이지에서 이 코드 사용
$(function () {
$(".select2").select2({
dropdownParent: $('#myModal')
});
$("#myModal").on('change', '#vdn_number', function () {
var term = $(this).val();
ajax: ({
url: "getAjaxData/",
dataType: 'json',
type: "POST",
data: function (term, page) {
return {
q: term, // search term
col: 'vdn'
};
},
results: function (data) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return { results: data };
}
});
});
});
이것이 당신에게 도움이 될 것 같습니다.
$("#IlceId").select2({
allowClear: true,
multiple: false,
dropdownParent: $("#IlceId").parent(),
escapeMarkup: function (m) {
return m;
},
});
이 코드는 작동합니다.감사해요.
좋아요, 파티에 늦었다는 건 알아요.하지만 저에게 효과가 있었던 것을 여러분과 공유하겠습니다.탭인덱스와 z인덱스 솔루션은 저에게 맞지 않았습니다.
선택 요소의 상위 설정은 선택 2 사이트에 나열된 일반적인 문제에 따라 작동했습니다.
부트스트랩 모달에서 선택2 부트스트랩 5 테마를 다음과 같이 사용합니다.
- 고치다
select2 & bootstrap모달 검색 입력 버그입니다. - 고치다
select2 & bootstrap옵션을 선택한 후 모달 스크롤 버그가 발생했습니다.
jQuery(function() {
$('.my-select2').each(function() {
$(this).select2({
theme: "bootstrap-5",
dropdownParent: $(this).parent(), // fix select2 search input focus bug
})
})
// fix select2 bootstrap modal scroll bug
$(document).on('select2:close', '.my-select2', function(e) {
var evt = "scroll.select2"
$(e.target).parents().off(evt)
$(window).off(evt)
})
})<!DOCTYPE html>
<html>
<head>
<!-- Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.2.0/dist/select2-bootstrap-5-theme.min.css" />
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Select2 v4.1
<select class="my-select2">
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
<option>Test 4</option>
<option>Test 5</option>
<option>Test 6</option>
<option>Test 7</option>
<option>Test 8</option>
<option>Test 9</option>
<option>Test 10</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>jquery 모바일 팝업을 사용하는 경우 _handleDocumentFocusIn 함수를 다시 작성해야 합니다.
$.mobile.popup.prototype._handleDocumentFocusIn = function(e) {
if ($(e.target).closest('.select2-dropdown').length) return true;
}저도 같은 문제를 가지고 있습니다.select2bootstrap modal그리고 해결책은 그것을 제거하는 것이었습니다.overflow-y: auto;그리고.overflow: hidden.modal-open그리고..modal classes
▁example니를 사용하는 예는 다음과 같습니다.jQuery제하기위를 overflow-y:
$('.modal').css('overflow-y','visible');
$('.modal').css('overflow','visible');
나는 전에 이 문제가 있었습니다, 나는 yi2를 사용하고 있고 나는 이것을 이렇게 해결했습니다.
$.fn.modal.Constructor.prototype.enforceFocus = $.noop;
애플리케이션에 세미 관련 문제가 있어서 2c를 넣겠습니다.
select2 위젯을 포함하는 양식을 가진 여러 개의 양식이 있습니다.모달 A 내부의 또 다른 모달인 모달 A를 열면 모달 B 내부의 select2 위젯이 사라지고 초기화에 실패합니다.
이 모델들은 각각 아약스를 통해 양식을 로딩하고 있었습니다.
해결책은 모달을 닫을 때 돔에서 양식을 제거하는 것이었습니다.
$(document).on('hidden.bs.modal', '.modal', function(e) {
// make sure we don't leave any select2 widgets around
$(this).find('.my-form').remove();
});
언급URL : https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal
'programing' 카테고리의 다른 글
| gitbash로 폴더를 변경하는 방법은 무엇입니까? (0) | 2023.05.25 |
|---|---|
| virtualenwrapper 및 Python 3 (0) | 2023.05.25 |
| bash에서 getopts를 사용하는 방법의 예 (0) | 2023.05.25 |
| PostgreSQL 오류: 치명적: 역할 "사용자 이름"이 없습니다. (0) | 2023.05.25 |
| jQuery를 사용하여 요소의 ID를 얻으려면 어떻게 해야 합니까? (0) | 2023.05.25 |