twitter-bootstrap - Liferay 中的 Bootstrap 模式

Question

我使用与 Tomcat 捆绑的 Bootstrap 2.3.2 和 Liferay 6.2。我在 Bootstrap 2.3.2 中创建了一些具有复杂主体结构的模态窗口，我想在我的门户中使用它们。 Here据说 Liferay 使用 Bootstrap 2.3.2 css，但不是 Bootstrap 2.3.2 javascript，AlloyUI 中包含模态、工具提示、选项卡等组件。

我包含了 Bootstrap 2.3.2 javascript 并尝试使用我的模态窗口，但如果我想显示一个模态窗口，它不会出现。我想问一下，我如何在 Liferay 中显示 native Bootstrap 模式。

Answer 1

您的模态没有出现的原因很可能是由于您的模态使用 hide CSS 类和以下 CSS 规则在 Liferay 6.2 中声明:

.aui .hide {
    display: none !important;
}

这会导致您的模态始终被隐藏。要解决此问题，我建议避免使用 hide类和添加 style="display: none;"给您的 modal div像这样:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <!-- Your modal HTML here... -->
</div>

下面是上述代码的可运行示例。如果您想在门户中使用它，只需删除 <link>正在加载 Bootstrap CSS 的元素(它被注释包围)。

<!-- The following link is not necessary in Liferay Portal 6.2 since bootstrap is loaded automatically -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<!-- The above link is not necessary in Liferay Portal 6.2. -->






<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h2 id="myModalLabel">Header Header Header</h2>
    </div>
    <div class="modal-body">
        <p>body body body</p>
    </div>
</div>
<button onclick="$('#myModal').modal();">Show</button>