关于simplemodal的动态加载

今天收到一个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>