登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

樱之花

叶散的时候,你明白欢聚;花谢的时候,你明白青春.

 
 
 

日志

 
 
关于我

分类中“我的实验室”是我在日常工作中的一些知识总结,有些写的比较匆忙,可能大家在阅读时会产生困扰,后期有时间我会重新整理编辑,谢谢大家的到访,您们的支持是我前进的动力!

DIV+Javascript弹出可拖动对话框  

2009-11-16 20:45:29|  分类: 网页界面 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
[完整源码下载]
这个DIV+JS对话框,可以说功能比较齐全,主要包括遮罩层,显示一般表单信息,显示复杂页面,显示确认对话框,显示等待信息,对话框拖动。现在共享出来,希望对您有帮助。已通过IE7,IE8,FF浏览器测试。使用方法很简单,如下:
SOUND CEP="0"<<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIV弹出对话框</title>
<meta name="author" content="Known Chen www.cnblogs.com/known" />
<style type="text/css">
html
{
    height
:100%;max-height:100%;background:#fff;
    font
:normal 10pt verdana,arial,sans-serif;
}
body
{height:100%;max-height:100%;}
</style>
<script type="text/javascript" src="Pop.js"></script>
</head>
<body>
<div style="padding:200px;">
<form name="form1" method="post">
    
<div id="d"></div>
    
<input type="button" id="Button1" value="弹出编辑信息" /> 
    
<input type="button" id="Button2" value="弹出页面" /> 
    
<input type="button" id="Button3" value="确认信息" /> 
    
<input type="button" id="Button4" value="等待信息" /> 
</form>
</div>
<script type="text/javascript">
    
function $(id) { return document.getElementById(id); }
    
function ok() {
        Pop.close({id:
'update',msg:$('t').value});
    }
    $(
'Button1').onclick = function() {
        
var p = {
            title: 
'修改信息',
            info: 
'<form name="f" method="post">请输入<input type="text" id="t" /><input type="button" value="确定" onclick="ok();" /></form>',
            width: 
350,
            height: 
100,
            onCallback: 
function(r) { $('d').innerHTML = r.id + ':' + r.msg; }
        };
        Pop.show(p);
    }
    $(
'Button2').onclick = function() {
        
var p = {
            title: 
'查询页面',
            url: 
'test.htm',
            width: 
350,
            height: 
100,
            onCallback: 
function(r) { $('d').innerHTML = r.id + ':' + r.name; }
        };
        Pop.show(p);
    }
    $(
'Button3').onclick = function() {
        
var c = {
            info: 
'确认提交?',
            ok: 
function() { Pop.wait(); document.forms[0].submit(); },
            cancel: 
function() { return false; }
        };
        Pop.confirm(c);
        
return false;
    }
    $(
'Button4').onclick = function() {
        Pop.wait();
    }
</script>
</body>
</html>
  评论这张
 
阅读(670)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018