모바일 장치의 Twitter 부트 신뢰할 수있는 모달
정품 인증 모달은 Android 및 iOS에서 작동하지 않습니다. 문제 추적기는 인식하지만 작동하는 솔루션을 제공하지 않습니다.
화면이 어두워 지지만 모달 자체는 뷰포트에 표시되지 않습니다. 페이지 상단에서 설치할 수 있습니다. 페이지를 아래로 스크롤하면 문제가 발생합니다.
다음은 bootstrap-responsive.css의 관련 부분입니다.
.modal {
position:fixed;
top:50%;
left:50%;
z-index:1050;
max-height:500px;
overflow:auto;
width:560px;
background-color:#fff;
border:1px solid #999;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip:padding-box;
-moz-background-clip:padding-box;
background-clip:padding-box;
margin:-250px 0 0 -280px;
}
적용 할 수있는 수정 사항이 있습니까?
편집 : 반응 형 / 모바일 문제를 해결하기 위해 비공식적 인 부트 모듈 모달 수정 이 구축되었습니다. 이것은 아마도 문제를 해결하는 가장 간단하고 쉬운 방법 일 것입니다.
이전에 논의한 문제 중 하나 에서 수정 사항이 발견되었습니다.
에 bootstrap-responsive.css
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
width: auto;
margin: 0;
}
.modal-body {
height: 60%;
}
그리고 bootstrap.css
.modal-body {
max-height: 350px;
padding: 15px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
Gil의 대답은 약속 (그가 연결 한 라이브러리)을 유지하지만 당분간 모바일 장치에서 아래로 스크롤하면 작동하지.
내 CSS 파일 끝에 CSS 스 니펫을 사용하여 문제를 해결했습니다.
@media (max-width: 767px) {
#content .modal.fade.in {
top: 5%;
}
}
#content선택은 내가 부트 할 수있는 특이성을 대체 할 수있는 HTML을 랩하는 ID입니다 (자신의 ID가 모달 HTML 포장 설정).
단점 : 모바일 장치에서 수직으로 중앙에 있지 않습니다.
장점 : 눈에 잘 띄고 더 작은 장치에서는 적당한 크기의 모달이 화면의 많은 부분을 차지하고 "비 센터링"이 명확하지 않습니다.
작동하는 이유 :
Bootstrap의 반응 형 CSS로 화면 크기가 작을 때 화면이 작은 장치의 경우 .modal.fade.in ' s'top '을 'auto'로 설정합니다. 어떤 모바일 웹킷 브라우저는 "자동"할당으로 수직 배치를 제공하는 데 어려움을 겪을 것입니까? 따라서 고정 값으로 다시 전환하면 훌륭하게 작동합니다.
모달은 이미 설정되어 있으므로 값은 문서 높이가 아니라 뷰포트의 높이에 운영 페이지의 길이나 스크롤 위치에 관계없이 작동합니다.
niftylettuce에 의한 솔루션 에 문제 2130 모든 모바일 플랫폼에서 조동사를 해결하는 것 ...
12/9/1/12 업데이트 : 수정 사항이 여기에 업데이트되었습니다. twitter bootstrap jquery
(아래 코드는 오래 작동합니다)
// # Twitter Bootstrap modal responsive fix by @niftylettuce
// * resolves #407, #1017, #1339, #2130, #3361, #3362, #4283
// <https://github.com/twitter/bootstrap/issues/2130>
// * built-in support for fullscreen Bootstrap Image Gallery
// <https://github.com/blueimp/Bootstrap-Image-Gallery>
// **NOTE:** If you are using .modal-fullscreen, you will need
// to add the following CSS to `bootstrap-image-gallery.css`:
//
// @media (max-width: 480px) {
// .modal-fullscreen {
// left: 0 !important;
// right: 0 !important;
// margin-top: 0 !important;
// margin-left: 0 !important;
// }
// }
//
var adjustModal = function($modal) {
var top;
if ($(window).width() <= 480) {
if ($modal.hasClass('modal-fullscreen')) {
if ($modal.height() >= $(window).height()) {
top = $(window).scrollTop();
} else {
top = $(window).scrollTop() + ($(window).height() - $modal.height()) / 2;
}
} else if ($modal.height() >= $(window).height() - 10) {
top = $(window).scrollTop() + 10;
} else {
top = $(window).scrollTop() + ($(window).height() - $modal.height()) / 2;
}
} else {
top = '50%';
if ($modal.hasClass('modal-fullscreen')) {
$modal.stop().animate({
marginTop : -($modal.outerHeight() / 2)
, marginLeft : -($modal.outerWidth() / 2)
, top : top
}, "fast");
return;
}
}
$modal.stop().animate({ 'top': top }, "fast");
};
var show = function() {
var $modal = $(this);
adjustModal($modal);
};
var checkShow = function() {
$('.modal').each(function() {
var $modal = $(this);
if ($modal.css('display') !== 'block') return;
adjustModal($modal);
});
};
var modalWindowResize = function() {
$('.modal').not('.modal-gallery').on('show', show);
$('.modal-gallery').on('displayed', show);
checkShow();
};
$(modalWindowResize);
$(window).resize(modalWindowResize);
$(window).scroll(checkShow);
이 코드를 사용하여 Bootstrap 모달 대화 상자가 열릴 때 중앙에 배치합니다. Android에서 작동하는지 확실하지 않습니다.
$('.modal').on('show', function(e) {
var modal = $(this);
modal.css('margin-top', (modal.outerHeight() / 2) * -1)
.css('margin-left', (modal.outerWidth() / 2) * -1);
return this;
});
사실, 나는 위에 솔루션을 시도하지 않습니다 Bootstrap 3에서 jschr의 Bootstrap-modal 프로젝트 를 시도 할 때 (결국) 기뻐했을 때 (최상위 답변에 링크 됨). js가 나에게 문제를 일으키고 있었기 때문에 포기했습니다 (어쩌면 내 문제는 한 문제이거나 Bootstrap 2에서 잘 작동합니다).하지만 CSS 파일 자체가 Android의 기본 2.3.4 브라우저에서 트릭을 수행합니다.
필자의 경우 지금까지 최신 전화기에서 예상되는 동작을 허용하기 위해 재정의를 사용하기 전에 (차선 적) 사용자 에이전트 감지를 사용했습니다.
예를 들어, 모든 안드로이드 폰 버전 3.x 이하에서 전체 해킹 세트 만 사용 예상 자바 스크립트를 사용하여 사용자 에이전트 감지 후 본문에 "oldPhoneModalNeed"클래스를 추가 한 다음 jschr의 Bootstrap-modal CSS 속성을 다음과 같이 모든 수 있습니다. 항상 .oldPhoneModalNeeded가 조상해야합니다.
이 속성을 javascript에서 전역 적으로 추가 할 수 있습니다.
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);
}
좋습니다. 수정하겠습니다. 오늘 9 월 5 일부터 2012 년까지해야 할 일부터 확인합니다.
문제 2130의 niftylettuce의 솔루션은 모든 모바일 플랫폼에서 모달을 수정하는 것 ...
12/9/1/12 업데이트 : 수정 사항이 여기에 업데이트되었습니다. twitter bootstrap jquery
여기에 대한 링크입니다 데모 는 내가 사용하는 코드는 위대한를 여기에 작품에게
title_dialog.modal();
title_dialog.modalResponsiveFix({})
title_dialog.touchScroll();
내 솔루션 ...
//Fix modal mobile Boostrap 3
function Show(id){
//Fix CSS
$(".modal-footer").css({"padding":"19px 20px 20px","margin-top":"15px","text-align":"right","border-top":"1px solid #e5e5e5"});
$(".modal-body").css("overflow-y","auto");
//Fix .modal-body height
$('#'+id).on('shown.bs.modal',function(){
$("#"+id+">.modal-dialog>.modal-content>.modal-body").css("height","auto");
h1=$("#"+id+">.modal-dialog").height();
h2=$(window).height();
h3=$("#"+id+">.modal-dialog>.modal-content>.modal-body").height();
h4=h2-(h1-h3);
if($(window).width()>=768){
if(h1>h2){
$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
}
$("#"+id+">.modal-dialog").css("margin","30px auto");
$("#"+id+">.modal-dialog>.modal-content").css("border","1px solid rgba(0,0,0,0.2)");
$("#"+id+">.modal-dialog>.modal-content").css("border-radius",6);
if($("#"+id+">.modal-dialog").height()+30>h2){
$("#"+id+">.modal-dialog").css("margin-top","0px");
$("#"+id+">.modal-dialog").css("margin-bottom","0px");
}
}
else{
//Fix full-screen in mobiles
$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
$("#"+id+">.modal-dialog").css("margin",0);
$("#"+id+">.modal-dialog>.modal-content").css("border",0);
$("#"+id+">.modal-dialog>.modal-content").css("border-radius",0);
}
//Aply changes on screen resize (example: mobile orientation)
window.onresize=function(){
$("#"+id+">.modal-dialog>.modal-content>.modal-body").css("height","auto");
h1=$("#"+id+">.modal-dialog").height();
h2=$(window).height();
h3=$("#"+id+">.modal-dialog>.modal-content>.modal-body").height();
h4=h2-(h1-h3);
if($(window).width()>=768){
if(h1>h2){
$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
}
$("#"+id+">.modal-dialog").css("margin","30px auto");
$("#"+id+">.modal-dialog>.modal-content").css("border","1px solid rgba(0,0,0,0.2)");
$("#"+id+">.modal-dialog>.modal-content").css("border-radius",6);
if($("#"+id+">.modal-dialog").height()+30>h2){
$("#"+id+">.modal-dialog").css("margin-top","0px");
$("#"+id+">.modal-dialog").css("margin-bottom","0px");
}
}
else{
//Fix full-screen in mobiles
$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
$("#"+id+">.modal-dialog").css("margin",0);
$("#"+id+">.modal-dialog>.modal-content").css("border",0);
$("#"+id+">.modal-dialog>.modal-content").css("border-radius",0);
}
};
});
//Free event listener
$('#'+id).on('hide.bs.modal',function(){
window.onresize=function(){};
});
//Mobile haven't scrollbar, so this is touch event scrollbar implementation
var y1=0;
var y2=0;
var div=$("#"+id+">.modal-dialog>.modal-content>.modal-body")[0];
div.addEventListener("touchstart",function(event){
y1=event.touches[0].clientY;
});
div.addEventListener("touchmove",function(event){
event.preventDefault();
y2=event.touches[0].clientY;
var limite=div.scrollHeight-div.clientHeight;
var diff=div.scrollTop+y1-y2;
if(diff<0)diff=0;
if(diff>limite)diff=limite;
div.scrollTop=diff;
y1=y2;
});
//Fix position modal, scroll to top.
$('html, body').scrollTop(0);
//Show
$("#"+id).modal('show');
}
이 문제에 대한 해키 한 해결책을 찾았지만 작동합니다. 모달을 여는 데 사용되는 링크 (데이터 대상 포함)에 클래스를 추가 한 다음 Jquery를 사용하여 데이터 대상을 가져 오는 해당 클래스에 클릭 이벤트를 추가하고 열어야하는 모달을 찾은 다음 그런 다음 Javascript를 통해 엽니 다. 나를 위해 잘 작동합니다. 또한 모바일에서만 실행되도록 모바일 수표를 추가했지만 필수는 아닙니다.
$('.forceOpen').click(function() {
var id = $(this).attr('data-target');
$('.modal').modal('hide');
$(id).modal('show');
});
주로 Nexus 7 모달 문제, 모달이 화면 아래로 내려갑니다.
.modal:before {
content: '';
display: inline-block;
height: 50%; (the value was 100% for center the modal)
vertical-align: middle;
margin-right: -4px;
}
나를 $('[data-toggle="modal"]').click(function(){});위해 잘 작동합니다.
이 질문은 꽤 오래되었지만 일부 사람들은 휴대폰에서 모달의 UX를 개선 할 솔루션을 찾을 때 여전히 우연히 발견 할 수 있습니다.
휴대폰에서 Bootrsrap 모달의 동작을 개선하기 위해 lib를 만들었습니다.
부트 스트랩 3 : https://github.com/keaukraine/bootstrap-fs-modal
부트 스트랩 4 : https://github.com/keaukraine/bootstrap4-fs-modal
참고 URL : https://stackoverflow.com/questions/10437151/twitter-bootstrap-modal-on-mobile-devices
'ProgramingTip' 카테고리의 다른 글
| 도구를 투명하게 만드는 방법은 무엇입니까? (0) | 2020.11.16 |
|---|---|
| mysql에서 SET autocommit = 1과 START TRANSACTION의 차이점 (내가 놓친 위치?) (0) | 2020.11.15 |
| Swagger API 선언에서 JSON-Schema를 생성하는 방법 (0) | 2020.11.15 |
| Pandas로 가변 수의 열 처리 -Python (0) | 2020.11.15 |
| Go에서 분할을 수행하는 방법 (0) | 2020.11.15 |