带有焦点触发器的 Bootstrap Popover 错误在 iOS/Safari 上不可消除 [英] Bootstrap Popover bug with focus trigger undismissible on iOS/Safari

问题描述

我已经在 <button> 元素上实现了一个可关闭的弹出框，其中 type="submit" 用于表单.

Bootstrap 文档明确指出:

<块引用>

使用 focus 触发器在下次单击时关闭弹出窗口用户制作.

为了正确的跨浏览器和跨平台行为，您必须使用

是否有某种形式的解决方法或修复我可以在此处应用以在 iOS/Safari 上点击它或网页上的其他地方(Chrome android 浏览器的默认行为)时消除弹出窗口，同时保留使用 <button> 用于表单功能的元素?

可以在此处的开发站点上查看该问题:

http://www.the-session.co.uk/dev_standalone/

解决方案

您可以使用 元素并使其提交表单.因此，您将遵循 bootstrap 的建议.

<a href="javascript:void(0)" onclick="document.getElementById('mc-embedded-subscribe-form').submit(); return false;"role="button" tabindex="0" data-placement="top" data-toggle="popover" data-trigger="hover" title="placeholder text" data-content="placeholder text" type="submit"value="订阅" name="subscribe" id="mc-embedded-subscribe" class="btn btn-block btn-success marg-bot-20">订阅最佳热水浴缸更新<i class="fafa-信封"></i></a>

尽管如此，真正的问题可能是关于 iOS 和带有 data-trigger="focus" 的引导程序的弹出窗口，因为如果您查看引导程序示例 ( http://getbootstrap.com/javascript/#dismiss-on-next-click )，它不适用于 iOS 即使在他们的页

I've implemented a dismissible popover on a <button> element with type="submit" for use with a form.

As the Bootstrap docs clearly state:

Use the focus trigger to dismiss popovers on the next click that the user makes.

For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include the role="button" and tabindex attributes.

http://getbootstrap.com/javascript/#popovers-examples

However popovers can be dimissed by the next click of a user using the hover trigger. I don't have the option of using an <a> element as the <button> corresponds to a form submission (apologies for long code block):

<button data-placement="top" data-toggle="popover" data-trigger="hover" title="placeholder text" data-content="placholder text" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-block btn-success marg-bot-20">Subscribe to Best Hot Tub Updates <i class="fa fa-envelope"></i></button>

The issue is here that the popover is dismissible expect on iOS mobile devices using the Safari web browser. Once the <button> is used the popover is not dismissable if the user taps elsewhere on the page or on the popover itself. This obscures the form element (preventing it from being viewed) and therefore needs fixing:

Is there some form of workaround or fix I can apply here to make the popover dismissible when tapping on it or elsewhere on the web page (default behaviour on Chrome android browser) for iOS/Safari while retaining the use of a <button> element for form functionality?

The issue can be viewed on a development site here:

http://www.the-session.co.uk/dev_standalone/

解决方案

You could use a <a> element and make it submit your form. Thus, you will follow the recommendation of bootstrap.

<a href="javascript:void(0)" onclick="document.getElementById('mc-embedded-subscribe-form').submit(); return false;" role="button" tabindex="0" data-placement="top" data-toggle="popover" data-trigger="hover" title="placeholder text" data-content="placholder text" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-block btn-success marg-bot-20">Subscribe to Best Hot Tub Updates <i class="fa fa-envelope"></i></a>

Nevertheless, the real issue is probably about iOS and the bootstrap's popover with data-trigger="focus", because if you take a look at the bootstrap sample ( http://getbootstrap.com/javascript/#dismiss-on-next-click ), it doesn't work for iOS even on their page

这篇关于带有焦点触发器的 Bootstrap Popover 错误在 iOS/Safari 上不可消除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！