almost 7 years ago
The Below Code will show you how you can create the Popup Window in Liferay.we have given the id **patient-popup** to the popup window and enable that window on onclick event of link button.
View.jsp
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %> <%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %> <portlet:defineObjects /> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <style> /* popup */ .patient-popup > h2{ color:#fff;} .patient-popup { display: none; background: #333; border-radius: 7px; bottom: 0; height: 160px; left: 0; margin: auto; position: fixed; right: 0; top: 0; width: 370px; z-index: 11; padding: 0 14px; } .patient-popup h2 { font-size: 20px; text-align: center; } .portlet .patient-popup .button-holder { margin: 0 auto; } .portlet .patient-popup .button-holder .btn { float: left; padding: 5px 3px; font-size: 16px; color: #fff; } .portlet .patient-popup .button-holder .btn.btn-cancel { color: #000; margin-right: 3px; } .overlay1 { width: 100%; background: #000; opacity: 0.4; height: 100%; position: fixed; top: 0; left: 0; display: none; z-index: 10; } .aui .patient-popup .button-holder { width: 129px; } .aui .patient-popup .btn.deleteRecord { float: left; } .aui .patient-popup .btn { color: #000000 !important; font-size: 14px !important; padding: 1px 9px !important; } </style> <script type="text/javascript"> function showPopup(){ //alert('open popup'); // $("body").trigger("click"); $(".patient-popup").show(); $(".overlay1").show(); } function closePopup(){ //alert('close popup'); $(".patient-popup").hide(); $('#message h2').html(""); $(".overlay1").hide(); //$(".docDetails").hide(); } </script> <aui:script > Liferay.provide(window,'clickOK',function() { $('#message h2').html("Complete the Demo of Popup Window"); $(".patient-popup").hide(); $(".overlay1").hide(); }, ['aui-io'] ); //End of Provide </aui:script> <a onclick='showPopup();' href='javascript:void(0)'>Click to Open PopUp</a> <div class="patient-popup"> <h2>This is Popup Message</h2> <aui:button-row> <aui:button type="cancel" value="Cancel" onClick="closePopup();" /> <aui:button cssClass="deleteRecord" type="button" value="OK" id='' onclick='clickOK();' /> </aui:button-row> </div> <div id="message"> <h2></h2> </div> <div class="overlay1"></div>
Below screen-shot show the pop-up window using liferay.
Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).
Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.
Chrome Version Support
Are you sure, you want to delete this comment?
Sign up using
0 Comment(s)