Bootstrap modal in Liferey

Question

I am using Bootstrap 2.3.2 and Liferay 6.2 bundled with Tomcat. I have modal windows with a complex body structure created in Bootstrap 2.3.2, and I would like to use them on my portal. It says 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 enabled javascript Bootstrap 2.3.2 and tried to use my modal windows, but if I want to show a modal window, it will not appear. I would like to ask how can I show the native modalities for loading into Liferay.

Answer 1

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

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

This makes your modal always hide. To get around this, I recommend avoiding the hide class and adding style="display: none;" to your modal div like this:

 <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> <!-- Your modal HTML here... --> </div> 

The following is an example of the execution of the above code. If you want to use it in the portal, simply remove the <link> element that loads the loading 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 you refer to, Liferay does not include Bootstrap JS plugins:

We use only CSS schemes Bootstrap and HTML, but not any of their JavaScript. One reason is that Bootstrap uses jQuery, and we use AlloyUI, and loading multiple JS libraries is just bad practice.

But AlloyUI has modal support:

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

Answer 3

i am facing the same problem after a lot of searching, i found this code that you can check in your portlet
"My problem appears in the iframe in the dialog box, but I can not because aui.css has encountered 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 " " quick wits in the elevator "