KAWWA Markup Pattern Library


Site Utilities

Modal Component Information

  • Class name: (k-modal+k-modal-trigger)
  • Version: 1.1
  • jQuery jQuery Interactive feature
  • Tapestry Tapestry Integration

Add to list

A modal window is a simple layer that appears over your page and which may or may not block access to its content.

It can be triggered by any link having the "k-modal-trigger" class, and it uses the href attribute value to target the modal.

Click to open modal window

HTML5 Plain Code

COPY
  1. <!-- Modal trigger -->
  2. <a href="#modal-example" class="k-modal-trigger">Click to open modal window</a>
  3. 
                                
  4. <!-- Modal -->
  5. <div id="modal-example" class="k-modal">
  6. 	<h3 class="modal-header">This is an example of modal window</h3>
  7. 	<div class="content">
  8. 		<p>As I wandered about the plaza lost in my gloomy forebodings Tars Tarkas 
  9. 		approached me on his way from the audience chamber. His demeanor toward 
  10. 		me was unchanged, and he greeted me as though we had not just parted a few moments before.</p>
  11. 	</div>
  12. </div>

For accurate control over modal display, place modal code outside the main container ("#container").


CSS Code

COPY
  1. div.k-modal {
  2. 	color: #444;
  3. 	background: #FFF;
  4. 	margin: 0 2% 2%;
  5. 	border: 1px solid #000;
  6. 	box-shadow: 1px 1px 15px #666;
  7. }
  8. 	div.k-modal .modal-header {
  9. 		font-size: 1.2em;
  10. 		color: #FFF;
  11. 		background: #000;
  12. 		padding: 0.2em 0.5em;
  13. 		margin: 1px;
  14. 		border: none;
  15. 	}
  16. 	div.k-modal .content {padding: 3% 5%;}
  17. 
                                
  18. 	div.k-modal .k-buttons-bar {text-align: center; margin-top: 2em;}
  19. 
                                
  20.     .ui-widget-overlay {
  21.     	position: absolute;
  22.     	top: 0;
  23.     	left: 0;
  24.         background: rgba(0,0,0,.8) url(../img/k-theme0/bg_photobox.png);
  25.     }
  26. 	.ui-icon-closethick {
  27. 		position: absolute;
  28. 		text-indent: -9000px;
  29. 	}
  30. 
                                
  31. /* Close button */
  32. 	a.ui-dialog-titlebar-close, a:link.ui-dialog-titlebar-close, a:visited.ui-dialog-titlebar-close {
  33. 		float: right;
  34. 		position: relative;
  35. 		top: 23px;
  36. 		left: 28px;
  37. 		width: 37px;
  38. 		height: 29px;
  39. 		background: url(../img/k-theme0/pic_close.png) bottom right no-repeat;
  40. 	}
  41. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	/* All modals - Copy this function definition to a separate file */
  5. 
                                
  6. 	function createDialog(dlink) {
  7. 		var theTarget = dlink.attr('href');
  8. 		$(theTarget).dialog({
  9. 			minHeight: 350,
  10. 			minWidth: 470,
  11. 			close: function(e) {
  12. 				dlink.focus();
  13. 				$(this).dialog('widget').remove();
  14. 			},
  15. 			autoOpen: false,
  16. 			describedBy: 'dialogDescription',
  17. 			modal: true
  18. 		});
  19. 	}
  20. 
                                
  21. 	function opensModal() {
  22. 		$('a.k-modal-trigger').each(function() {
  23. 			var theTarget = $(this).attr('href');
  24. 			createDialog($(this));
  25. 			$(this).click(function() {
  26. 				createDialog($(this));
  27. 				$(theTarget).dialog('open');
  28. 				return false;
  29. 			});
  30. 		});
  31. 	}
  32. 
                                
  33. 	/* Call */
  34. 	$(document).ready(function(){
  35. 		if($.ui && $.ui.dialog) {
  36. 			opensModal();
  37. 		}
  38. 	});
  39. })(jQuery);

For more information about how to apply this plug-in, its options, events and methods, see the jQuery Dialog page.

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Tapestry Jquery Integration

There are a few components you can use to create a dialog in your pages.

  • Dialog, this is the base of your Dialog, just put the content of your dialog inside.
  • DialogLink, clicking a DialogLink will make the associated Dialog to open.
  • DialogAjaxLink, clicking a DialogAjaxLink will open the associated Dialog and refresh the zone you've set inside the Dalog.

NB: Those components belong to the tapestry5-jquery project, please have a look to the official website.

Dialog parameters
Name Required Java Type Default Prefix Default Value Description
params false JSONObject prop The Dialog parameters (please refer to jquery-ui documentation).
initMethod false String prop The Tapestry.Initializer method to call to initialize the dialog.
Dialoglink parameters
Name Required Java Type Default Prefix Default Value Description
dialog true String literal The id of the dialog to open.
DialogAjaxLink parameters
Name Required Java Type Default Prefix Default Value Description
zone true String literal The id of the zone to refresh.
context false Object[] prop The activation context.

The Template

COPY
  1. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" 
  2. 	xmlns:p="tapestry:parameter">
  3. 
                                
  4. 
                                
  5. <div t:type="jquery/dialog" t:clientId="modal-example" class="k-modal" t:params="params">
  6. 	<h3 class="modal-header">This is an example of modal window</h3>
  7. 	<div class="content">
  8. 		<p>As I wandered about the plaza lost in my gloomy forebodings Tars Tarkas 
  9. 		approached me on his way from the audience chamber. His demeanor toward 
  10. 		me was unchanged, and he greeted me as though we had not just parted a few moments before.</p>
  11. 		<t:zone t:id="myZone" id="myZone">${count}
  12. 			<t:form>
  13. 				Try "abcd" :<input t:type="TextField" type="text" t:id="goalName" 
  14. 					t:value="goalName" t:mixins="jquery/Autocomplete"/>
  15. 			</t:form>
  16. 		</t:zone>
  17. 	</div>
  18. </div>
  19. 
                                
  20. 			
  21. <h3>Dialog Link</h3>
  22. <t:jquery.dialoglink t:dialog="modal-example" class="k-modal-trigger">Open</t:jquery.dialoglink>
  23. 			
  24. <h3>Dialog Ajax Link</h3>
  25. <t:jquery.dialogajaxlink t:dialog="modal-example" t:zone="myZone" class="k-modal-trigger">
  26. 	Open
  27. </t:jquery.dialogajaxlink>
  28. 	
  29. 	
  30. </html>

Java Implementation

COPY
  1. 
                                
  2. 	@Property
  3. 	private JSONObject params;
  4. 	
  5. 	@OnEvent(EventConstants.ACTIVATE)
  6. 	public void onActivate(){
  7. 		params=new JSONObject();
  8. 		params.accumulate("modal", true);
  9. 	}
  10. 	@Component
  11. 	private Zone myZone;
  12. 	
  13. 	@Persist 
  14.     private Integer count;
  15. 
                                
  16.     @Inject
  17.     private Request request;
  18. 
                                
  19.     @Property
  20.     private String goalName;
  21.     
  22.     @OnEvent(EventConstants.ACTIVATE)
  23.     void init()
  24.     {
  25.         if (count == null)
  26.             count = 0;
  27.     }
  28. 
                                
  29.     public Integer getCount()
  30.     {
  31.         return count++;
  32.     }
  33. 
                                
  34.     @OnEvent(EventConstants.ACTION)
  35.     Object updateCount()
  36.     {
  37.         if (!request.isXHR()) { return this; }
  38.         return myZone;
  39.     }

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce