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.

Daliadalila

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>

Saddleback

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

Hinze

Thank you for your answer. I know about this solution, but I have more modal windows and it would be easier to override AlloyUI methods for my modals. Probably this is the only one solution. – Daliadalila

So you successfully included bootstrap js? Do you get an error in the console when you try to trigger the modal? What does your code look like that renders the modal? – Hinze

No, I didn't successfully included bootstrap js. In my previous comment "Probably this is the only one solution" I meant that the only one solution is rewriting bootstrap modals to AlloyUI modals. If I want to trigger modal, I don't get any error in browser console. Here is Bootstrap 2.3.2 js code pastebin.com/kJwNvAU3 . Code which renders modals is between 820-880 lines and in Liferay environment it doesn't invoke. – Daliadalila

Answer 3

i face the same problem after a lot of search i found this code you can test it in your portlet
"my issue is appearing iframe in dialog on lifray but i cant because of aui.css conflicted with bootstrap.css "

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

you can check this link "liferay savvy"

Zellers