今天收到一个request，需要动态加载simplemodal的弹出框，也就是说在同一页面中，根据点击的链接不同，加载的内容也将不同，其实实现起来真的很简单。请看如下代码：
1$i = 1;
2while($data = db_fetch_object($result))
3{
4 $desc = $data->body;
5?>
6<a href='#' onclick="$('#basic-modal-content<?php echo $i; ?>').modal()" class='basic'><?php echo $data->title;?></a><br /><br />
7
8<!-- modal content -->
9<div id="basic-modal-content<?php echo $i ?>" style="padding-top:10px; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:12px; display:none;">
10<?php echo isset($desc) ? $desc : '';?>
11</div>
12
13<?php
14 $i++;
15}
首先，我在链接中定义了循环的basic-modal-content的ID；其次，需要定义这些ID为basic-modal-content的style为none，否则内容将会显示在页面上。一切就是这么easy，关键点我已标红。
下面这个例子是我在网上刨出来的，父页面向子页面传值得例子，希望能给大家一些启发。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3 <HEAD>
4 <TITLE> New Document </TITLE>
5 <SCRIPT LANGUAGE="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js"></SCRIPT>
6 <script src="http://simplemodal.googlecode.com/files/jquery.simplemodal-1.3.3.js"></script>
7 <SCRIPT LANGUAGE="JavaScript">
8 <!--
9 $(function(){
10 $("#btn1").click(function(){
11 $('<div><input type="text"/></div>').modal({
12 escClose:true,
13 close:true,
14 closeHTML:"<a href='#'>Close</a>",
15 onShow:function(dialog){
16 $("input",dialog.data).val($("#input1").val())}
17 });
18 })
19 })
20 //-->
21 </SCRIPT>
22 <style>
23 #simplemodal-overlay {background-color:#000;}
24 #simplemodal-container {background-color:#333; border:8px solid #444; padding:12px;color:#FFF}
25 </style>
26 </HEAD>
27
28 <BODY>
29 <input type="text" id="input1"/>
30 <input type="button" id="btn1" value="test"/>
31 </BODY>
32 </HTML>