Django, HTML, JavaScript, CSS – ModalWindow with Scroll on Button Click

In the previous post, I displayed how a modal window can be used to show some basic information. But this time around, I had more challenges to deal with:
1. Open the Modal Window on click of button rather than a link. So the button had to be used like a link by using location.href
2. The data in the modal window was huge. So I had to use a scrolling modal window.
3. The CSS for the X(close) button had to be adjusted
4. The scroll borders had to be hidden on the modal window as they looked ugly
5. The modal window had a list of items to select from. After selecting the item, it should be loaded on the main page and the modal window had to be closed so the user doesn’t have to do that extra step.

Here’s the solution:
HTML code
The onclick=”location.href”#kw_fulfillment_templates’ opens up the modal window on click of the button and simulates a link behavior on a button.

<div class="table-row">
	<div class="table-cell">
		Select fullfillment email template:
	</div> 
	<div class="table-cell">
		<input type="button" name="btn_fulfillment_template" value="Email templates" onclick="location.href='#kw_fulfillment_templates'">
	</div>
	<div class="table-cell">
		<span id="selected_template_name" style="color: RGB(0,0,100)"></span>
	</div>
</div>
<div id="kw_fulfillment_templates" class="modalDialog">
	<div>
	<a href="#close" title="Close" class="modalclose">X</a>
	<h2>Fulfillment email templates for kiteworks orders</h2>
	<table>
		{% for row in fulfillment_email_templates %}
			<tr class="{% cycle "row1" "row2" %}">
				<td><input type="button" id="tmp_sel_{{forloop.counter}}" onclick="setTemplateData({{forloop.counter}})" value="Select"></td>
				<td id="tmp_name_{{forloop.counter}}">{{row.name}}</td>
				<td id="tmp_desc_{{forloop.counter}}">{{row.description}}</td>
				<td id="tmp_subj_{{forloop.counter}}" style="display: none">{{row.email_subject}}</td>
				<td id="tmp_body_{{forloop.counter}}" style="display: none">{{row.email_body}}</td>
			</tr>
		{% endfor %}
	</table>
	</div>		
</div>

CSS Code
The overflow:hidden would enable scrollbars but hide the physical scroll bars.


.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 100ms ease-in;
	-moz-transition: opacity 100ms ease-in;
	transition: opacity 100ms ease-in;
	pointer-events: none;
	overflow: scroll;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 800px;
	position: relative;
	margin: 2% auto;
	padding: 15px 15px 15px 15px;
	border-radius: 5px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
	overflow: hidden;
}

.modalclose {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: 12px;
	text-align: center;
	top: 10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.modalclose:hover { background: #00d9ff; }

JavaScript code
The location.href=”#close” takes care of closing the modal window after the JavaScript implementation is complete.

function setTemplateData(index) {
	$td_name = $( "#tmp_name_"+index );
	$td_subj = $( "#tmp_subj_"+index );
	$td_body = $( "#tmp_body_"+index );

	$span_name = $( "#selected_template_name" );
	$input_subject = $( "#id_email_subject ");
	$txtarea_body = $( "#id_email_body ");

	$span_name.text($td_name.text());
	$input_subject.val($td_subj.text());
	$txtarea_body.val($td_body.text());

	location.href="#close";
}

Modal window with scroll

Advertisements

One thought on “Django, HTML, JavaScript, CSS – ModalWindow with Scroll on Button Click

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s