过来蹭几分,使用jQuery ui插件!<div id="dialog" title="会员信息">
<!---会员列表-->
<table border="1">
<tr>
<th>会员编号</th>
<th>会员名</th>
<th>性别</th>
<th>爱好</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>男</td>
<td>男</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>男</td>
<td>男</td>
</tr>
</table>
</div>
<button id="opener">显示会员信息</button>
jQuery(function() {
jQuery("#dialog" ).dialog({
autoOpen: false, //隐藏弹框
modal: true, //模型弹框(底层内容为灰色,不可操作)
show: { //弹框出现的效果以及时间
effect: "blind",
duration: 1000
},
hide: { //弹框隐藏的效果以及时间
effect: "explode",
duration: 1000
}
});
jQuery("#opener" ).click(function() {
jQuery( "#dialog" ).dialog( "open" );//按钮绑定事件,弹框显示内容
});
});
<!---会员列表-->
<table border="1">
<tr>
<th>会员编号</th>
<th>会员名</th>
<th>性别</th>
<th>爱好</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>男</td>
<td>男</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>男</td>
<td>男</td>
</tr>
</table>
</div>
<button id="opener">显示会员信息</button>
jQuery(function() {
jQuery("#dialog" ).dialog({
autoOpen: false, //隐藏弹框
modal: true, //模型弹框(底层内容为灰色,不可操作)
show: { //弹框出现的效果以及时间
effect: "blind",
duration: 1000
},
hide: { //弹框隐藏的效果以及时间
effect: "explode",
duration: 1000
}
});
jQuery("#opener" ).click(function() {
jQuery( "#dialog" ).dialog( "open" );//按钮绑定事件,弹框显示内容
});
});
做一个 div 是浮动定位 先隐藏
把信息放在 这个div里面 在显示