如何在网页上弹出一个对话框显示一些内容javascript
1.下载并引用js文件 dialog.js 及其css文件dialog.css
<script language="javascript" type="text/javascript" src="jquery.min.js"></script> <link href="dialog.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript" src="dialog.js"></script>
2.
<tr class="oddcol"><td width=\'20%\'>'.$depval['KOSTL'].'</td><td width=\'50%\'><a href="?m=roster&c=index&a=rtrdptinit&dpid='.$depval['OBJID'].'" hidefocus="true" style="outline:none;">'.$depval['STEXT'].'</a></td><td align=\'right\'><a href="javascript:showdep('.$depval['OBJID'].');" hidefocus="true" style="outline:none;">详情</a> <a href="javascript:editdep('.$depval['OBJID'].');" hidefocus="true" style="outline:none;">修改</a> <a href="javascript:deledep('.$depval['OBJID'].');" hidefocus="true" style="outline:none;">删除</a></td></tr>
3.
<script type="text/javascript">
function editperson(psid){
artDialog({title:'修改员工信息',iframe:'?m=Roster&c=index&a=changepsInfo&psid='+psid,width:'400px',height:'320px',id:'editps'},function(){});
}
function editdep(dpid){
artDialog({title:'修改部门信息',iframe:'?m=Roster&c=index&a=changedepInfo&dpid='+dpid,width:'400px',height:'200px',id:'editdep'},function(){});
}
function addperson(depid){
artDialog({title:'新增员工',iframe:'?m=Roster&c=index&a=addPerson&depid='+depid,width:'400px',height:'400px',id:'addps'},function(){});
}
function adddep(dpid){
artDialog({title:'新增部门',iframe:'?m=Roster&c=index&a=addDep&dpid='+dpid,width:'400px',height:'300px',id:'adddep'},function(){});
}
function showdep(dpid){
artDialog({title:'显示部门信息',iframe:'?m=Roster&c=index&a=showdepInfo&dpid='+dpid,width:'400px',height:'200px',id:'showdep'});
}
function showperson(psid){
artDialog({title:'显示员工信息',iframe:'?m=Roster&c=index&a=showpsInfo&psid='+psid,width:'400px',height:'360px',id:'showps'});
}
function deleperson(psid){
artDialog({title:'删除员工信息',iframe:'?m=Roster&c=index&a=delepsInfo&psid='+psid,width:'400px',height:'320px',id:'deleps'},function(){});
}
function deledep(dpid){
artDialog({title:'删除部门',iframe:'?m=Roster&c=index&a=deledepInfo&dpid='+dpid,width:'400px',height:'200px',id:'deledep'},function(){});
}
</script>
整个一页可以这么写
<?php
defined('HRM') or exit('No permission resources.');
$str2 = (isset($_GET['dpid'])&& $_GET['dpid'] ) ? trim($_GET['dpid']) : '50001482';
?>
<html>
<head>
<script language="javascript" type="text/javascript" src="<?php echo JS_PATH?>jquery.min.js"></script>
<link href="<?php echo CSS_PATH?>dialog.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="<?php echo JS_PATH?>dialog.js"></script>
<style type="text/css">
div{border:1px solid black;}
#memtab{width:368px;}
#deptab{width:368px;}
.oddcol{padding-top:10px;font-size:12px;}
.evencol{background:#FCFCFC;padding-top:10px;font-size:12px;}
#leftdep{float:left;width:368px;height:670px;font-size:14px;list-style:none;}
#rightmem{float:left;width:368px;height:670px;font-size:12px;list-style:none;}
#memtitle{font-size:14px;font-weight:700}
#deptitle{font-size:14px;font-weight:700;background:#E0E0E0;}
#btm9lk{
position:absolute;
left:10px;
top:5px;
}
.righttitle{font-size:12px;}
#btmlk{float:left;font-size:12px;}
#memtitle{background:#E0E0E0;}
</style>
</head>
<body>
<?php
$reself = $this->selectS($str2);
?>
<div id='btmlk'><a href="javascript:history.back(-1);">返回上一层</a></div>
<div id = 'leftdep'>
<table id='deptab'>
<?php
echo '<tr><td class="righttitle" align="center" colspan = 3>'.$reself['KOSTL'].$reself['STEXT'].' 子部门</td></tr>';
?>
<tr id='deptitle'><td>成本中心</td><td>部门名称</td><td align='right'>操作</td></tr>
<tr><td></td><td></td><td></td></tr>
<?php
//显示子部门列表
$resl = $this->selectF($str2);
$num = 1;
foreach($resl as $depval) {
if(is_numeric($num)&($num&1)){
echo '<tr class="oddcol"><td width=\'20%\'>'.$depval['KOSTL'].'</td><td width=\'50%\'><a href="?m=roster&c=index&a=rtrdptinit&dpid='.$depval['OBJID'].'" hidefocus="true" style="outline:none;">'.$depval['STEXT'].'</a></td><td align=\'right\'><a href="javascript:showdep('.$depval['OBJID'].');" hidefocus="true" style="outline:none;">详情</a> <a href="javascript:editdep('.$depval['OBJID'].');" hidefocus="true" style="outline:none;">修改</a> <a href="javascript:deledep('.$depval['OBJID'].');" hidefocus="true" style="outline:none;">删除</a></td></tr>';
}else{
echo '<tr class="evencol"><td width=\'20%\'>'.$depval['KOSTL'].'</td><td width=\'50%\'><a href="?m=roster&c=index&a=rtrdptinit&dpid='.$depval['OBJID'].'" hidefocus="true" style="outline:none;">'.$depval['STEXT'].'</a></td><td align=\'right\'><a href="javascript:showdep('.$depval['OBJID'].');" hidefocus="true" style="outline:none;">详情</a> <a href="javascript:editdep('.$depval['OBJID'].');" hidefocus="true" style="outline:none;">修改</a> <a href="javascript:deledep('.$depval['OBJID'].');" hidefocus="true" style="outline:none;">删除</a></td></tr>';
}
$num = $num+1;
}
echo '<tr class="oddcol"><td></td><td></td><td align=\'right\'><a href="javascript:adddep('.$str2.');" hidefocus="true" style="outline:none;">新增部门</a></td></tr>';
?>
</table>
</div>
<div id='rightmem'>
<table id='memtab'>
<?php
echo '<tr><td class="righttitle" align="center" colspan = 3>'.$reself['KOSTL'].$reself['STEXT'].' 人员</td></tr>';
?>
<tr id='memtitle'><td>胸卡号</td><td>姓名</td><td align='right'>操作</td></tr>
<tr><td></td><td></td><td></td></tr>
<?php
//显示员工列表 str2表示部门id 1胸卡号 2姓名 3部门 4职务
$remem = $this->selectD($str2);
$num2 = 1;
$lastpernr = 0;
foreach($remem as $demem) {
if(is_numeric($num2)&($num2&1)){
echo '<tr class="oddcol"><td width=\'20%\'>'.$demem['PERNR'].'</td><td width=\'30%\'>'.$demem['ENAME'].'</td><td align=\'right\'><a href="javascript:showperson('.$demem['PERNR'].');" hidefocus="true" style="outline:none;">详情</a> <a href="javascript:editperson('.$demem['PERNR'].');" hidefocus="true" style="outline:none;">修改</a> <a href="javascript:deleperson('.$demem['PERNR'].');" hidefocus="true" style="outline:none;">删除</a></td></tr>';
}else{
echo '<tr class="evencol"><td width=\'20%\'>'.$demem['PERNR'].'</td><td width=\'30%\'>'.$demem['ENAME'].'</td><td align=\'right\'><a href="javascript:showperson('.$demem['PERNR'].');" hidefocus="true" style="outline:none;">详情</a> <a href="javascript:editperson('.$demem['PERNR'].');" hidefocus="true" style="outline:none;">修改</a> <a href="javascript:deleperson('.$demem['PERNR'].');" hidefocus="true" style="outline:none;">删除</a></td></tr>';
}
$num2 = $num2+1;
$lastpernr = $demem['PERNR'];
}
// if(sizeof($remem)==35){
// echo '<tr class="oddcol"><td width=\'20%\'></td><td width=\'30%\'></td><td align=\'right\'><a href=\'#\'>下一页></></td></tr>';
// }
echo '<tr class="oddcol"><td></td><td></td><td align=\'right\'><a href="javascript:addperson('.$str2.');" hidefocus="true" style="outline:none;">新增员工</a></td></tr>';
?>
</table>
</div>
<script type="text/javascript">
function editperson(psid){
artDialog({title:'修改员工信息',iframe:'?m=Roster&c=index&a=changepsInfo&psid='+psid,width:'400px',height:'320px',id:'editps'},function(){});
}
function editdep(dpid){
artDialog({title:'修改部门信息',iframe:'?m=Roster&c=index&a=changedepInfo&dpid='+dpid,width:'400px',height:'200px',id:'editdep'},function(){});
}
function addperson(depid){
artDialog({title:'新增员工',iframe:'?m=Roster&c=index&a=addPerson&depid='+depid,width:'400px',height:'400px',id:'addps'},function(){});
}
function adddep(dpid){
artDialog({title:'新增部门',iframe:'?m=Roster&c=index&a=addDep&dpid='+dpid,width:'400px',height:'300px',id:'adddep'},function(){});
}
function showdep(dpid){
artDialog({title:'显示部门信息',iframe:'?m=Roster&c=index&a=showdepInfo&dpid='+dpid,width:'400px',height:'200px',id:'showdep'});
}
function showperson(psid){
artDialog({title:'显示员工信息',iframe:'?m=Roster&c=index&a=showpsInfo&psid='+psid,width:'400px',height:'360px',id:'showps'});
}
function deleperson(psid){
artDialog({title:'删除员工信息',iframe:'?m=Roster&c=index&a=delepsInfo&psid='+psid,width:'400px',height:'320px',id:'deleps'},function(){});
}
function deledep(dpid){
artDialog({title:'删除部门',iframe:'?m=Roster&c=index&a=deledepInfo&dpid='+dpid,width:'400px',height:'200px',id:'deledep'},function(){});
}
</script>
</body>
</html>