This is the sample of the modal framework that I use.

Call the modal...

<!-- // Here I'm using an anchor tag to call the modal, however this can virtually be done anywhere using the same attribute or jquery // -->
<a href="#" onClick="showModal('/assignments/create/<?php echo $course['Course']['id'];?>');return false;">Add an Assignment</a>


<!-- // JQuery - inside your jquery handler simply call the function, as display in a click // -->

$('div#Photo').click(function(){
	showModal('/view/to/render/here','specificClassNameForModalCSSTargeting');
	return false; // not needed I just like to return something...
});

modal.css

/* Modal Default Styles */

body div#ModalOverlay {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #EDECE8;
	z-index:1001;
	-moz-opacity: 0.95;
	opacity:.95;
	filter: alpha(opacity=95);
}

body #ModalWrapper {
	display: none;
	position: fixed;
	overflow:auto;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	z-index:1002;
}

body #ModalWrapper #ModalContentOuterWrapper {
	display:none;
	position:absolute;
	top:5%;
	left:50%;
	background: transparent url('../img/dialog-border.png');
	padding:10px;
	width:500px;
	border-radius:10px;
}

body #ModalWrapper #ModalContentOuterWrapper #ModalContentWrapper {
	position:relative;
	background-color:#fff;
	border-radius:10px;
	height:auto;
	color:#000;
	letter-spacing:0;
	font-size:12px;
	text-align:left;
	/*margin-left:-375px;*/ /* this should to be done via jQuery */
}

#ModalWrapper #ModalContentOuterWrapper #ModalContentWrapper div.header {
	position:relative;
	margin-bottom:20px;
	background-color:#bd0512;
	border-radius:5px 5px 0 0;
	padding:15px 20px 10px 20px;
}

#ModalWrapper #ModalContentOuterWrapper #ModalContentWrapper div.header img{
	position:absolute;
	top:10px;
	left:30px;
	z-index:3;
}

#ModalWrapper #ModalContentOuterWrapper #ModalContentWrapper div.header h1{
	float: left;
	font-family: "futura-pt", sans-serif;
	font-size:18px;
	line-height:30px;
	letter-spacing: 1px;
	font-weight: 700;
	color:#fff;
}

#ModalWrapper #ModalContentOuterWrapper #ModalContentWrapper div.header .secondaryButton {
	float:right;
}

#ModalWrapper #ModalContentOuterWrapper #ModalContentWrapper div.content {
	padding:0 20px 20px 20px;
	max-height:400px;
	overflow: auto;
	margin:0 0 20px 0;
}

#ModalWrapper #ModalContentOuterWrapper #ModalContentWrapper div.footer {
	position:relative;
	background-color:#F9F9F9;
	border-top: 1px solid #EFEFEF;
	color:#fff;
	border-radius: 0 0 5px 5px;
	padding:10px 20px;
}

modal.html

<div id="ModalWrapper">

	<div id="ModalContentOuterWrapper">
		<div id="ModalContentWrapper">
			<div id="ModalContent"><!--  // MARKUP FROM AJAX CALL GOES HERE FILLS IN DYNAMICALLY //  --></div>
		</div> <!--// End of Content wrapper //-->
		<div class="clear"></div>
	</div>

</div> <!--// End of Modal wrapper //-->

<div id="ModalOverlay"></div>

modal.jquery.js

// you will need to include jquery into your parent document or view.
// If you wish to place this inside of your main js file place it outside of the $(document).ready() call.


function showModal(url, className) {

	$.get(url, function(data) {

		var $modal = $('div#ModalWrapper'),
			$modalOverlay = $('div#ModalOverlay'),
			$modalWrapper = $('#ModalContentOuterWrapper'),
			$modalContent = $('#ModalContentWrapper'),
			$body = $("body"),
			$html = $("html");

		// hide any extra spaces top and bottom and esstentially disable scrolling
		$html.css("overflow", "hidden");
		$body.css("overflow", "hidden");

		// showing the modal and the content.
		// $modalOverlay.fadeIn('fast');
		$modalOverlay.show();
		$modalContent.html('').html(data); // clear all html in modal before we load new content  - COA's
		$modal.show();

		// add any styles from classes then let's center the modal.
	    $modalWrapper.addClass(className);
	    $modalWrapper.show();
	    $modalWrapper.css({
	        'marginLeft': "-" + parseInt($modalWrapper.width() / 2) + "px"
	    });

	});

	return false;
}

function changeModalContents(html) {

	var $modalWrapper = $('#ModalContentOuterWrapper'),
		$modalContent = $('#ModalContentWrapper');

	$modalContent.html('').html(html); // clear all html in modal before we load new content  - COA's
    $modalWrapper.css({
        'marginLeft': "-" + parseInt($modalWrapper.width() / 2) + "px"
    });

	return false;
}

function closeModal() {

	var $modal = $('div#ModalWrapper'),
		$modalOverlay = $('div#ModalOverlay'),
		$modalWrapper = $('#ModalContentOuterWrapper'),
		$modalContent = $('#ModalContentWrapper'),
		$body = $("body"),
		$html = $("html");

	$html.css("overflow", "auto");
	$body.css("overflow", "auto");

	$modal.hide();
	$modalContent.html(''); // clear all html in modal before we load new content  - COA's
	$modalWrapper.removeClass().hide(); // clear all html in modal before we load new content  - COA's
	$modalOverlay.fadeOut('fast');

}

modal_inner.html

<!-- // This goes inside the div#ModalContent -->

<div class="header">
</div>

<div class="content">

</div>

<div class="footer">
	<a href="#" id="ModalCloseButton" class="button" onClick="closeModal();return false;">Close</a>
	<input id="ModalSaveButton" class="button buttonPrimary" type="submit" value="Save" />
	<div class="clearfix"></div>
</div>