如何在网页上弹出一个对话框显示一些内容javascript

最新推荐文章于 2024-03-27 23:55:13 发布
最新推荐文章于 2024-03-27 23:55:13 发布
阅读量3.3k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/charliefromkansas/article/details/51381027
版权

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>




CharlieMC
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript写的一个DIV 弹出网页对话框
10-29
综上所述，这个JavaScript弹出对话框实现了自定义外观和基本交互功能，适合用作提示、操作指示或公告。它的可定制性和跨浏览器兼容性使其成为前端开发中的实用工具。为了进一步优化，可以考虑添加关闭按钮、动画效果...
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
09-02
在本文中，我们将深入探讨如何使用Bootstrap框架创建一个在当前网页上弹出并可关闭的非弹窗对话框。Bootstrap的模态框功能提供了一种优雅的方式来展示额外的内容，而无需离开当前页面或打开新的窗口。 首先，让我们...
JavaScript的三种弹出提示框(alert、confirm、prompt)，前端开发实战
最新发布
weixin_57992300的博客
03-27 1486
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
js弹出提示框在页面中间,页面左下角有javascript
wenangou的博客
10-17 390
language="java"> message="1、欢迎使用...系统!^" +"3、我的联系方式:vipdingy@126.com ^" + "^";
js三大弹出消息框
weixin_30920853的博客
06-20 78
1、警告框：alert（）消息框 特点：一个确定按钮，无返回值 2、确认框：confirm（）消息框 特点：一个确定按钮，一个取消按钮 返回值：单击确定按钮返回True，单击取消按钮返回False 3、提示框：prompt（）消息框 特点：一个输入框，一个确定按钮，一个取消按钮 name=prompt（s，s2） --s文本信息，s2输入框值赋给变量name 返回：单击确定返回变量...
js 弹出对话框
跃然实验室
07-28 740
js 弹出对话框 function ale(){ alert("提示信息") }
JavaScript写的一个自定义弹出式对话框代码
10-29
最近闲来无事，用js自己做了一个弹出式对话框，需要应用弹出式对话框的朋友可以参考下。
javascript web对话框与弹出窗口
10-30
在Web开发中，JavaScript是一种非常强大的工具，它能够帮助开发者实现多种交互效果，其中对话框与弹出窗口是常见的功能之一。这些功能不仅能够提升用户体验，还能够让开发者更好地控制页面上的信息展示方式。 #### ...
JS实现网页每隔3秒弹出一次对话框的方法
10-23
主要介绍了JS实现网页每隔3秒弹出一次对话框的方法,涉及JavaScript结合时间函数递归调用的相关技巧,非常简单,具有一定参考借鉴价值,需要的朋友可以参考下
js弹出层并获取弹出层文本内容
07-11
js弹出div获取弹出层中文本值 经测试适用于现在主流 浏览器如：IE6+.. ff 等等
点击文字弹出层
04-02
之前存下来的 分享给需要的人 希望能帮到有需要的人
JS多功能对话框
12-01
参数说明 function(title,content,flag,fun,fun2) title：弹出框的标题，一般设置为"温馨提示"，设为false时可不显示标题； content：弹出框的主题内容，可以是html代码； flag：弹出框的类型标识，0-5，分别对应警告框，确定取消框，警告&强制执行框，确定取消框2型，自定义弹出框； fun：弹出框的确定点击事件，字符串型(如"ok()")； fun2：弹出框的取消点击事件，字符串型(如"cancel()")。
Dialog 弹出提示窗 js
09-26
[强烈推荐]超漂亮的仿腾讯弹出层效果(兼容主流浏览器)弹出html，iframe，提示窗，屏蔽下拉列表框iframe等
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
11-24
一、JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框 alert("提示信息！"); } //弹出一个询问框，有确定和取消按钮 function firm() { //利用对话框返回的值 （true 或者 false） if (confirm("你确定提交吗？")) { alert("点击了确定"); } else {
弹出框，原来页面禁止操作
welcome201010的专栏
02-10 2256
JS弹出一个网页对话框，后面全变灰 *{margin:0;padding:0;} JS弹出一个网页对话框，后面全变灰，并不可用。思路：一个覆盖整个页面的层，设置透明度0     测试测试测试测试测试测试测试     嗯！效果还不错！');" />     function sAlert(str){ var msgw,msgh,bordercolor; ms
js弹出对话框方式
咸鱼的星空
12-19 1483
【1、最基本的js弹出对话框窗口代码】 这是最基本的js弹出对话框，其实代码就几句非常简单： 复制代码代码如下:   window.open ("page.html")  -->  因为这是一段javascripts代码，所以它们应该放在标签和之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这
JS的基础弹出
weixin_67358175的博客
09-12 744
1.练习JavaScript的两种使用方式，弹出“你好，JavaScript”.代码如下简单的一个弹出框。
九种 JS 弹出对话框的方法总结
逸少
12-24 3559
1、最基本的js弹出对话框窗口代码】 这是最基本的js弹出对话框，其实代码就几句非常简单： 复制代码代码如下:   window.open ("page.html")  -->  因为这是一段javascripts代码，所以它们应该放在标签和之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个
dialog - JS弹出窗口
weixin_34208283的博客
07-06 1314
请先调用dialog JS var diag = new Dialog();//窗体大小diag.Width = 300;diag.Height = 150; //窗体IDdiag.Title = "内容页为隐藏的元素的html"; //需要显示的内容窗体IDdiag.InvokeElementId="forlogin" //是否显示确认按钮diag.OKEvent = function(...
用JavaScript写的一个自定义弹出式对话框
05-25
下面是一个简单的示例代码，可以自定义弹出式对话框： ```html <!DOCTYPE html> 弹出式对话框 ()">打开对话框 ; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:300px; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值