Bootstrap 4 页面中关于 Iphone 错误渲染的对话框答案

【问题标题】：Dialog in Bootstrap4Xpages on Iphone bad renderingBootstrap 4 页面中关于 Iphone 错误渲染的对话框
【发布时间】：2014-10-06 21:50:44
【问题描述】：

我的 bootstrap4Xpages 插件正在工作。显示对话框时，这在 PC 上呈现良好，但在垂直位置的 Iphone 上呈现不佳。（查看示例）用户无法看到对话框的左侧部分。

我在对话框控件周围包裹了一个 div，希望能够更改 css ，但这似乎不起作用。示例代码：

<div class="modal-dialog">
<xe:dialog id="dialog1" title="TEST on an Iphone">

    <xe:dialogContent id="dialogContent1">
    test this is a test Modal dialog test
    <xp:br></xp:br>
     is this working or not that is the question, Not on an Iphone vertically I guess!!!
    </xe:dialogContent>
    <xe:dialogButtonBar id="dialogButtonBar1">
    <xp:button
                        value="Ok"
                        id="button3"
                        themeId="Button.Primary">
                        <i class="glyphicon glyphicon-ok" />
                        <xp:eventHandler
                            event="onclick"
                            submit="true"
                            refreshMode="partial"
                            refreshId="dialog1">
                            <xp:this.action><![CDATA[#{javascript:getComponent("dialog1").hide()}]]></xp:this.action>
                        </xp:eventHandler>
    </xp:button>
    </xe:dialogButtonBar>
</xe:dialog>
</div>

【问题讨论】：

模态框有动画吗？在 bootstrap4xpages 插件存在之前，我在 iPhone（和 Android）上遇到了类似的模态问题。关闭动画使它们看起来居中。我不知道为什么这会有所帮助，但它确实有帮助，所以我把它关掉了。
我应该补充一点，默认情况下，模态已打开动画。（虽然这是 bootstrap 2）我必须先关闭它才能让它在较小的设备上正确显示。
我怎么知道它是否有动画？更重要的是如何关闭它？
似乎是 bootstrap4xpages 插件中的一个错误：它在对话框上设置了固定宽度。我已经在这里报告了：github.com/OpenNTF/Bootstrap4XPages/issues/70
弹出对话框与移动 UI 完全相反。虽然您可以调查它为什么不起作用，但我强烈建议您寻找替代方法！就地对话框似乎是一种更合适的方法。手机不同于台式机！

标签： css twitter-bootstrap xpages

【解决方案1】：

同时我发现了这个项目： bootstrap-modal

我尝试了 bootstrap 3 版本，堆叠版本，它在所有设备上都可以正常渲染，包括 Iphone。

【讨论】：