Liferay 中的引导模式

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 中显示原生引导模式。

Answer 1

您的模态没有出现的原因很可能是因为您的模态使用hide CSS 类并且在 Liferay 6.2 中声明了以下 CSS 规则：

.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>

以下是上述代码的可运行示例。如果您想在门户中使用它，只需删除正在加载引导 CSS 的 <link> 元素（它被 cmets 包围）。

<!-- 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>

Answer 2

根据您链接到的文档，Liferay 不包含 Bootstrap JS 插件：

我们只使用 Bootstrap CSS 和 HTML 约定，而不是它们的任何 JavaScript。一个原因是因为 Bootstrap 使用 jQuery 而我们使用 AlloyUI，并且加载多个 JS 库只是一个整体不好的做法。

但 AlloyUI 确实支持模态：

http://alloyui.com/examples/modal/

HTML：

<div class="yui3-skin-sam">
  <div id="modal"></div>
</div>

Javascript：

YUI().use(
  'aui-modal',
  function(Y) {
    var modal = new Y.Modal(
      {
        bodyContent: 'Modal body',
        centered: true,
        headerContent: '<h3>Modal header</h3>',
        modal: true,
        render: '#modal',
        width: 450
      }
    ).render();
  }
);

Answer 3

经过大量搜索后，我遇到了同样的问题，我发现这段代码你可以在你的 portlet 中测试它
“我的问题出现在 lifray 对话框中的 iframe 但我不能因为 aui.css 与 bootstrap.css 冲突”

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
<portlet:renderURL var="simpleDialogIframeExample"
windowState="<%=LiferayWindowState.POP_UP.toString()%>">
<portlet:param name="mvcPath"
value="/html/alloyuidialog/iframe_alloyui_dialog_example.jsp"/>
</portlet:renderURL>
<a href="<portlet:renderURL />">&laquo;Home</a>
<div class="separator"></div>
<div>
<h1>Iframe AUI Dialog Please click on button  and see </h1><br/>
<aui:button name="dialog-iframe-example"  id="dialog-iframe-example"
value="Click Here See Ifame Allou UI Dialog"> </aui:button>
</div>
<aui:script>
AUI().use('aui-base',
'aui-io-plugin-deprecated',
'liferay-util-window',
'aui-dialog-iframe-deprecated',
function(A) {
A.one('#<portlet:namespace />dialog-iframe-example').on('click', function(event){
var popUpWindow=Liferay.Util.Window.getWindow(
{
dialog: {
centered: true,
constrain2view: true,
//cssClass: 'yourCSSclassName',
modal: true,
resizable: false,
width: 500
}
}
).plug(
A.Plugin.DialogIframe,
{
autoLoad: true,
iframeCssClass: 'dialog-iframe',
uri:'<%=simpleDialogIframeExample.toString()%>'
}).render();
popUpWindow.show();
popUpWindow.titleNode.html("Liferay 6.2 Iframe Dialog Window");
popUpWindow.io.start();

});
});
</aui:script>

您可以查看此链接“liferay savvy”