如何在網頁上彈出一個對話方塊顯示一些內容javascript
阿新 • • 發佈：2018-12-27
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.
下面程式碼都是錯的，需要把artDialog改為art.dialog
<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>