Bootstrap modal in Liferay

Question

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.

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.

Answer 1

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

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>

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>

Answer 2

According to the documentation that you link to, Liferay does not include Bootstrap JS plugins:

We are only using the Bootstrap CSS and HTML conventions, but not any of their JavaScript. One reason is because Bootstrap uses jQuery and we use AlloyUI, and loading multiple JS libraries is just an overall bad practice.

But AlloyUI does have support for modals:

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