[ KAWWA PORTAL ] Components : Modal

As I wandered about the plaza lost in my gloomy forebodings Tars Tarkas approached me on his way from the audience chamber. His demeanor toward me was unchanged, and he greeted me as though we had not just parted a few moments before.

HTML5 Plain Code

COPY

```

```

<a href="#modal-example" class="k-modal-trigger">Click to open modal window</a>

```

```

<div id="modal-example" class="k-modal">

	<h3 class="modal-header">This is an example of modal window</h3>

```
	<div class="content">
```

		<p>As I wandered about the plaza lost in my gloomy forebodings Tars Tarkas

		approached me on his way from the audience chamber. His demeanor toward

		me was unchanged, and he greeted me as though we had not just parted a few moments before.</p>

```
	</div>
```
```
</div>
```

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

CSS Code

COPY

```
div.k-modal {
```
```
	color: #444;
```
```
	background: #FFF;
```
```
	margin: 0 2% 2%;
```
```
	border: 1px solid #000;
```
```
	box-shadow: 1px 1px 15px #666;
```
```
}
```
```
	div.k-modal .modal-header {
```
```
		font-size: 1.2em;
```
```
		color: #FFF;
```
```
		background: #000;
```
```
		padding: 0.2em 0.5em;
```
```
		margin: 1px;
```
```
		border: none;
```
```
	}
```
```
	div.k-modal .content {padding: 3% 5%;}
```

	div.k-modal .k-buttons-bar {text-align: center; margin-top: 2em;}

```
    .ui-widget-overlay {
```
```
    	position: absolute;
```
```
    	top: 0;
```
```
    	left: 0;
```

        background: rgba(0,0,0,.8) url(../img/k-theme0/bg_photobox.png);

```
    }
```
```
	.ui-icon-closethick {
```
```
		position: absolute;
```
```
		text-indent: -9000px;
```
```
	}
```
```
/* Close button */
```

	a.ui-dialog-titlebar-close, a:link.ui-dialog-titlebar-close, a:visited.ui-dialog-titlebar-close {

```
		float: right;
```
```
		position: relative;
```
```
		top: 23px;
```
```
		left: 28px;
```
```
		width: 37px;
```
```
		height: 29px;
```

		background: url(../img/k-theme0/pic_close.png) bottom right no-repeat;

```
	}
```

How to apply

COPY

```
(function($){
```
```
	'use strict';
```

	/* All modals - Copy this function definition to a separate file */

```
	function createDialog(dlink) {
```
```
		var theTarget = dlink.attr('href');
```
```
		$(theTarget).dialog({
```
```
			minHeight: 350,
```
```
			minWidth: 470,
```
```
			close: function(e) {
```
```
				dlink.focus();
```
```
				$(this).dialog('widget').remove();
```
```
			},
```
```
			autoOpen: false,
```
```
			describedBy: 'dialogDescription',
```
```
			modal: true
```
```
		});
```
```
	}
```
```
	function opensModal() {
```

		$('a.k-modal-trigger').each(function() {

			var theTarget = $(this).attr('href');

```
			createDialog($(this));
```
```
			$(this).click(function() {
```
```
				createDialog($(this));
```
```
				$(theTarget).dialog('open');
```
```
				return false;
```
```
			});
```
```
		});
```
```
	}
```
```
	/* Call */
```
```
	$(document).ready(function(){
```
```
		if($.ui && $.ui.dialog) {
```
```
			opensModal();
```
```
		}
```
```
	});
```
```
})(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

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"

```
	xmlns:p="tapestry:parameter">
```

<div t:type="jquery/dialog" t:clientId="modal-example" class="k-modal" t:params="params">

	<h3 class="modal-header">This is an example of modal window</h3>

```
	<div class="content">
```

		<p>As I wandered about the plaza lost in my gloomy forebodings Tars Tarkas

		approached me on his way from the audience chamber. His demeanor toward

		me was unchanged, and he greeted me as though we had not just parted a few moments before.</p>

		<t:zone t:id="myZone" id="myZone">${count}

```
			<t:form>
```

				Try "abcd" :<input t:type="TextField" type="text" t:id="goalName"

					t:value="goalName" t:mixins="jquery/Autocomplete"/>

```
			</t:form>
```
```
		</t:zone>
```
```
	</div>
```
```
</div>
```
```
			
```
```
<h3>Dialog Link</h3>
```

<t:jquery.dialoglink t:dialog="modal-example" class="k-modal-trigger">Open</t:jquery.dialoglink>

```
			
```
```
<h3>Dialog Ajax Link</h3>
```

<t:jquery.dialogajaxlink t:dialog="modal-example" t:zone="myZone" class="k-modal-trigger">

```
	Open
```
```
</t:jquery.dialogajaxlink>
```
```
	
```
```
	
```
```
</html>
```

Java Implementation

COPY

```
	@Property
```
```
	private JSONObject params;
```
```
	
```
```
	@OnEvent(EventConstants.ACTIVATE)
```
```
	public void onActivate(){
```
```
		params=new JSONObject();
```
```
		params.accumulate("modal", true);
```
```
	}
```
```
	@Component
```
```
	private Zone myZone;
```
```
	
```
```
	@Persist 
```
```
    private Integer count;
```
```
    @Inject
```
```
    private Request request;
```
```
    @Property
```
```
    private String goalName;
```
```
    
```
```
    @OnEvent(EventConstants.ACTIVATE)
```
```
    void init()
```
```
    {
```
```
        if (count == null)
```
```
            count = 0;
```
```
    }
```
```
    public Integer getCount()
```
```
    {
```
```
        return count++;
```
```
    }
```
```
    @OnEvent(EventConstants.ACTION)
```
```
    Object updateCount()
```
```
    {
```

        if (!request.isXHR()) { return this; }

```
        return myZone;
```
```
    }
```

KAWWA Markup Pattern Library

Site Utilities

Modal

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Tapestry Jquery Integration

The Template

Java Implementation

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce