Twitter bootstrap Liferay中的Bootstrap模型

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

---

我包括了Bootstrap 2.3.2 javascript，并尝试使用我的模式窗口，但如果我想显示模式窗口，它不会出现。我想问，如何在Liferay中显示本机引导模式。

根据您链接到的文档，Liferay不包括引导JS插件：

我们只使用引导CSS和HTML约定，而不使用任何JavaScript。一个原因是因为引导使用jQuery，我们使用AlloyUI，而加载多个JS库只是一个糟糕的做法

但是AlloyUI确实支持情态动词：

HTML:

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();
  }
);

YUI（）。使用(
“aui模态”，
功能（Y）{
var模态=新的Y.模态(
{
bodyContent:'模态体'，
对,，
headerContent:“模式标头”，
莫代尔：是的，
呈现：“#模态”，
宽度：450
}
).render（）；
}
);

模态未出现的原因很可能是由于模态使用了

隐藏

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的

元素（它被注释包围）

×
收割台
身体

Show

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

如果是框架AUI对话框，请单击按钮并查看

“
谢谢你的回答。我知道这个解决方案，但我有更多的模态窗口，可以更容易地覆盖模态的AlloyUI方法。可能这是唯一的解决方案。所以你成功地包含了引导js？当你尝试触发模态时，控制台中会出现错误吗？你的代码看起来像什么模式是什么？不，我没有成功地包含引导js。在我之前的评论中，“可能这是唯一的解决方案“我的意思是，唯一的解决方案是将引导模式重写为AlloyUI模式。若我想触发模态，我不会在浏览器控制台中得到任何错误。下面是Bootstrap 2.3.2 js代码。呈现模态的代码在820-880行之间，在Liferay环境中它不会调用。
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <!-- Your modal HTML here... -->
</div>

<%@ 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>