Android 移动设备上的 Twitter Bootstrap 模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10437151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap modal on mobile devices
提问by ty.
Bootstrap modals don't work correctly on Android and iOS. The issue tracker acknowledges the problem but does not offer a working solution:
Bootstrap 模式在 Android 和 iOS 上无法正常工作。问题跟踪器承认问题，但不提供有效的解决方案：
Modals in 2.0 are broken on mobile.
Modal window in 2.0 not positioning properly
The screen darkens but the modal itself is not visible in the viewport. It's possible to find it at the top of the page. The problem occurs when you've scrolled down on the page.
屏幕变暗，但模式本身在视口中不可见。可以在页面顶部找到它。当您向下滚动页面时会出现问题。
Here is a relevant portion of bootstrap-responsive.css:
这是 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;
}
Is there a fix I can apply?
我可以申请修复吗？
采纳答案by acconrad
EDIT: An unofficial Bootstrap Modal modificationhas been built to address responsive/mobile issues. This is perhaps the simplest and easiest way to remedy the problem.
编辑：已经构建了一个非官方的 Bootstrap Modal 修改来解决响应/移动问题。这可能是解决问题的最简单和最简单的方法。
There has since been a fix found in one of the issues you discussed earlier
此后在您之前讨论的问题之一中找到了修复程序
in bootstrap-responsive.css
在 bootstrap-responsive.css
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
width: auto;
margin: 0;
}
.modal-body {
height: 60%;
}
and in bootstrap.css
并在 bootstrap.css
.modal-body {
max-height: 350px;
padding: 15px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
回答by jlovison
Gil's answer holds promise (the library he linked to) --- but for the time being, it still doesn't work when scrolled down on the mobile device.
吉尔的回答很有希望（他链接到的图书馆）——但就目前而言，在移动设备上向下滚动时它仍然不起作用。
I solved the issue for myself using just a snippet of CSS at the end of my CSS files:
我只使用 CSS 文件末尾的一段 CSS 就为自己解决了这个问题：
@media (max-width: 767px) {
#content .modal.fade.in {
top: 5%;
}
}
The #contentselector is simply an id that wraps my html so I can override Bootstrap's specificity (set to your own id wrapping your modal html).
的#content选择很简单，就是围绕我的HTML，所以我可以重写引导的特异性的ID（设置为您自己的ID包裹你的HTML模式）。
The downside:It's not centered vertically on the mobile devices.
缺点：它没有在移动设备上垂直居中。
The upside:It's visible, and on smaller devices, a reasonably sized modal will take up much of the screen, so the "non-centering" won't be as apparent.
好处：它是可见的，并且在较小的设备上，合理大小的模态将占据大部分屏幕，因此“非居中”不会那么明显。
Why it works:
为什么有效：
When you're at low screen sizes with Bootstrap's responsive CSS, for devices with smaller screens, it sets .modal.fade.in's 'top' to 'auto'. For some reason the mobile webkit browsers seem to have a hard time with figuring out the vertical placement with the "auto" assignment. So just switch it back to a fixed value and it works great.
当您使用 Bootstrap 的响应式 CSS 处于低屏幕尺寸时，对于屏幕较小的设备，它将.modal.fade.in's 'top' 设置为 'auto'。出于某种原因，移动 webkit 浏览器似乎很难通过“自动”分配来确定垂直位置。因此，只需将其切换回固定值即可，效果很好。
Since the modal is already set to postition: absolute, the value is relative to the viewport's height, not the document height, so it works no matter how long the page is or where you're scrolled to.
由于模式已经设置为 postition: absolute，该值相对于视口的高度，而不是文档高度，因此无论页面有多长或滚动到哪里，它都可以工作。
回答by Gil Birman
The solution by niftylettucein issue 2130seems to fix modals in all mobile platforms...
niftylettuce在issue 2130 中的解决方案似乎修复了所有移动平台中的模态......
9/1/12 UPDATE: The fix has been updated here: twitter bootstrap jquery plugins
2012 年 9 月 1 日更新：修复程序已在此处更新：twitter bootstrap jquery plugins
(the code below is older but still works)
（下面的代码较旧但仍然有效）
// # 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);
回答by Jeradan
We use this code to center the Bootstrap modal dialogs when they open. I haven't had any issue with them on iOS while using this but I'm not sure if it will work for Android.
我们使用此代码在 Bootstrap 模式对话框打开时将它们居中。我在使用它时在 iOS 上没有遇到任何问题，但我不确定它是否适用于 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;
});
回答by Vishnar Tadeleratha
Admittedly, I haven't tried any of the solutions listed above but I was (eventually) jumping for joy when I tried jschr's Bootstrap-modal projectin Bootstrap 3 (linked to in the top answer). The js was giving me trouble so I abandoned it (maybe mine was a unique issue or it works fine for Bootstrap 2) but the CSS files on their own seem to do the trick in Android's native 2.3.4 browser.
诚然，我没有尝试过上面列出的任何解决方案，但是当我在 Bootstrap 3 中尝试jschr 的 Bootstrap-modal 项目（链接到顶部答案）时，我（最终）高兴得跳了起来。js 给我带来了麻烦，所以我放弃了它（也许我的问题是一个独特的问题，或者它适用于 Bootstrap 2）但是 CSS 文件本身似乎在 Android 的本机 2.3.4 浏览器中起到了作用。
In my case, I've resorted so far to using (sub-optimal) user-agent detection before using the overrides to allow expected behaviour in modern phones.
就我而言，到目前为止，在使用覆盖以允许现代手机中的预期行为之前，我已经使用（次优）用户代理检测。
For example, if you wanted all Android phones ver 3.x and below only to use the full set of hacks you could add a class "oldPhoneModalNeeded" to the body after user agent detection using javascript and then modify jschr's Bootstrap-modal CSS properties to always have .oldPhoneModalNeeded as an ancestor.
例如，如果您希望所有 3.x 及以下版本的 Android 手机仅使用全套 hack，您可以在使用 javascript 检测用户代理后向正文添加一个类“oldPhoneModalNeeded”，然后将 jschr 的 Bootstrap-modal CSS 属性修改为始终将 .oldPhoneModalNeeded 作为祖先。
回答by Hetdev
you can add this property globally in javascript:
您可以在 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);
}
回答by gem007bd
Mainly Nexus 7 modal issue , modal was going down the screen
主要是 Nexus 7 模态问题，模态在屏幕下方
.modal:before {
content: '';
display: inline-block;
height: 50%; (the value was 100% for center the modal)
vertical-align: middle;
margin-right: -4px;
}
回答by Otabek Suvankulov
For me just $('[data-toggle="modal"]').click(function(){});is working fine.
对我来说只是$('[data-toggle="modal"]').click(function(){});工作正常。
回答by keaukraine
Albeit this question is quite old, some people still may stumble upon it when looking for solution to improve UX of modals on mobile phones.
虽然这个问题已经很老了，但有些人在寻找改善手机模态用户体验的解决方案时仍然可能会偶然发现它。
I've made a lib to improve Bootrsrap modals' behavior on phones.
我制作了一个库来改善 Bootrsrap 模态在手机上的行为。
Bootstrap 3: https://github.com/keaukraine/bootstrap-fs-modal
引导程序 3：https: //github.com/keaukraine/bootstrap-fs-modal
Bootstrap 4: https://github.com/keaukraine/bootstrap4-fs-modal
回答by Rockster160
Found a very hacky solution to this problem, but it works. I added a class to the link that is used to open the modal (With the data-target), then using Jquery, added a click event to that class that gets the data-target, finds the modal it is supposed to open, and then opens it via Javascript. Works just fine for me. I also added a mobile check on mine so that it only runs on mobile, but that's not required.
为这个问题找到了一个非常hacky的解决方案，但它有效。我在用于打开模态（使用数据目标）的链接中添加了一个类，然后使用 Jquery，向该类添加了一个单击事件以获取数据目标，找到它应该打开的模态，然后然后通过Javascript打开它。对我来说很好用。我还在我的手机上添加了一个移动检查，以便它只能在移动设备上运行，但这不是必需的。
$('.forceOpen').click(function() {
var id = $(this).attr('data-target');
$('.modal').modal('hide');
$(id).modal('show');
});
