Liferay中的Bootstrap模态 [英] Bootstrap modal in Liferay

问题描述

我使用与Tomcat捆绑在一起的Bootstrap 2.3.2和Liferay 6.2.我在Bootstrap 2.3.2中创建了一些具有复杂主体结构的模式窗口，我想在我的门户网站中使用它们. 这里表示Liferay使用Bootstrap 2.3.2 css，但不使用Bootstrap 2.3.2 javascript，AlloyUI中包含了javascript和模态，工具提示，选项卡等组件.

I use Bootstrap 2.3.2 and Liferay 6.2 bundled with Tomcat. I have some modal windows with complex body structure created in Bootstrap 2.3.2 and I would like to use them in my portal. Here is said that Liferay uses Bootstrap 2.3.2 css, but not Bootstrap 2.3.2 javascript and components like modals, tooltips, tabs, ... are included in AlloyUI.

我包括了Bootstrap 2.3.2 JavaScript，并尝试使用我的模式窗口，但是如果我想显示一个模式窗口，它不会出现.我想问一下，如何在Liferay中显示本机引导程序模式.

I included Bootstrap 2.3.2 javascript and tried to use my modal windows, but if I want to show a modal window it doesn't appear. I would like to ask, how can i show native bootstrap modals in Liferay.

推荐答案

模态不出现的原因最有可能是由于模态使用hide CSS类，并且在其中声明了以下CSS规则Liferay 6.2:

The reason that your modal is not appearing is most likely due to the fact that your modal uses the hide CSS class and the following CSS rule is declared in Liferay 6.2:

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

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

This causes your modal to always be hidden. To workaround this, I recommend avoiding the hide class and adding style="display: none;" to your modal div like so:

<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>元素(它会被注释包围).

Below is a runnable example of the above code. If you want to use it in the portal, simply remove the <link> element which is loading the bootstrap CSS (it is surrounded by comments).

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

这篇关于Liferay中的Bootstrap模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！