Cách tạo modal dialog với jQuery

18-06-2010 10:05

Cách tạo modal dialog với jQuery

Bài viết hướng dẫn các bạn cách tạo modal dialog cho trang web với thư viện javascript jQuery.

Tải thư viện jQuery(Xem bên dưới).

Lưu đoạn mã sau vào file dialog.js

var Dialog = new Object();
Dialog.show = function(e) {
	//Cancel the link behavior
	e.preventDefault();
	
	//Get the A tag
	var id = '#dialog';

	//Get the screen height and width
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();

	//Set heigth and width to mask to fill up the whole screen
	$('#mask').css({'width':maskWidth,'height':maskHeight});
	
	//transition effect		
	$('#mask').fadeIn(1000);	
	$('#mask').fadeTo("slow",0.8);	

	//Get the window height and width
	var winH = $(window).height();
	var winW = $(window).width();

	//Set the popup window to center
	
	$(id).css('top',  winH/2-$(id).height()/2);
	$(id).css('left', winW/2-$(id).width()/2);

	//transition effect
	$(id).fadeIn(2000); 
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});	
}

Lưu đoạn mã CSS sau vào file dialog.css

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:250px; 
  height:130px;
  padding:10px;
  background-color:#ffffff;
}

Tạo file test.html với nội dung sau

<html>
	<head>
		<link type="text/css" rel="stylesheet" href="dialog.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="dialog.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
			$('a[name=dialog]').click(function(e) {
					Dialog.show(e);
			});
		});
		</script>
		
	</head>
	<body>
		<a href="#" name="dialog">Show dialog</a>
		<div id="boxes">
			<div id="dialog" class="window">
			Test Dialog
				<div style="float:right;"><a href="#"class="close"/>Close</a></div>
				<div>Dialog content</div>
			</div>
			<div id="mask"></div>
		</div>
	</body>
</html>

Chạy file test.html, click vào link "Show dialog" để xem kết quả.