twitter-bootstrap – Liferay中的Bootstrap模式

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