twitter-bootstrap – Liferay中的Bootstrap模式

发布时间：2020-12-18 00:27:57 所属栏目：安全来源：网络整理

导读：我使用与Tomcat捆绑在一起的Bootstrap 2.3.2和Liferay 6.2.我在Bootstrap 2.3.2中创建了一些具有复杂主体结构的模态窗口,我想在我的门户中使用它们. Here据说Liferay使用Bootstrap 2.3.2 css,但不是Bootstrap 2.3.2 javascript和组件,如模态,工具提示,制表符

我使用与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中显示原生引导模态.

解决方法

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

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

这会导致您的模态始终被隐藏.要解决这个问题,我建议避免使用hide类并添加style =“display：none;”对你的模态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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!