简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器


Posted in Javascript onOctober 22, 2013

简单漂亮的js弹窗 - 自由拖拽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>简单漂亮的js弹窗 - 自由拖拽</title> 
<script src="js/jquery-1.7.2.js"></script> 
<script type="text/javascript"> 
//作者:zhao jinhan 
//时间: 2013年10月22日 
//邮箱:xb_zjh@126.com 
function drag(o,s) 
{ 
//drag(obj [,scroll]); 
//obj:对象的id或对象本身; 
//scroll(可选):对象是否随窗口拖动而滑动,默认为否 if (typeof o == "string") o = document.getElementById(o); 
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; 
o.orig_y = parseInt(o.style.top) - document.body.scrollTop; 
o.orig_index = o.style.zIndex; 
o.onmousedown = function(a) 
{ 
this.style.zIndex = 10000; 
var d=document; 
if(!a)a=window.event; 
var x = a.clientX+d.body.scrollLeft-o.offsetLeft; 
var y = a.clientY+d.body.scrollTop-o.offsetTop; 
d.ondragstart = "return false;" 
d.onselectstart = "return false;" 
d.onselect = "document.selection.empty();" 
if(o.setCapture) 
o.setCapture(); 
else if(window.captureEvents) 
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
d.onmousemove = function(a) 
{ 
if(!a)a=window.event; 
o.style.left = a.clientX+document.body.scrollLeft-x; 
o.style.top = a.clientY+document.body.scrollTop-y; 
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; 
o.orig_y = parseInt(o.style.top) - document.body.scrollTop; 
} 
d.onmouseup = function() 
{ 
if(o.releaseCapture) 
o.releaseCapture(); 
else if(window.captureEvents) 
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
d.onmousemove = null; 
d.onmouseup = null; 
d.ondragstart = null; 
d.onselectstart = null; 
d.onselect = null; 
o.style.cursor = "normal"; 
o.style.zIndex = o.orig_index; 
} 
} 
if (s) 
{ 
var orig_scroll = window.onscroll?window.onscroll:function (){}; 
window.onscroll = function () 
{ 
orig_scroll(); 
o.style.left = o.orig_x + document.body.scrollLeft; 
o.style.top = o.orig_y + document.body.scrollTop; 
} 
} 
} 
var title = '提示标题'; 
var message='提示内容'; 
var TrueEvent=''; 
var CancelEvent=''; 
var CloseEvent=''; 
function dialogalert(title, message, TrueEvent, CancelEvent, CloseEvent) { 
$("#divBackground").removeClass("hidden"); 
$("#divMaincontent").removeClass("hidden"); 
$("#alertTitle").html(title); 
$("#alertContent").html(message); 
$("#btnSure").click(function () { 
$("#divBackground").addClass("hidden"); 
$("#divMaincontent").addClass("hidden"); 
$("#btnSure").unbind("click"); 
if (TrueEvent) { 
//确认之后跳转url 
window.location.href = TrueEvent; 
} 
}); //确定 
$("#btnCancel").click(function () { 
$("#divBackground").addClass("hidden"); 
$("#divMaincontent").addClass("hidden"); 
$("#btnCancel").unbind("click"); 
if (CancelEvent) { 
//取消之后跳转url 
window.location.href = CancelEvent; 
} 
});//取消 
$("#btnClose").click(function () { 
$("#divBackground").addClass("hidden"); 
$("#divMaincontent").addClass("hidden"); 
$("#btnClose").unbind("click"); 
if (CloseEvent) { 
//关闭之后跳转url 
window.location.href = CloseEvent; 
} 
});//X关闭 
} 
$(function(){ 
drag("divMaincontent"); 
dialogalert("弹窗标题","弹窗信息",'http://www.baidu.com/','http://www.icode100.com/','http://bbs.icode100.com/'); 
}); 
</script> 
<style type="text/css"> 
body, p { 
background: none repeat scroll 0 0 #FFFFFF; 
color: #333333; 
font-size: 12px; 
margin: 0; 
padding: 0; 
} 
.hidden { display:none} 
.left { float:left } 
.right { float:right } 
#divMaincontent { 
font-family: "微软雅黑","宋体",Microsoft Yahei,Tahoma,Arial,sans-serif; 
font-size: 100%; 
font-weight: normal; 
position:absolute; 
vertical-align: baseline; 
} 
#divMaincontent a { text-decoration:none; color:#333333;} 
.blackf1 { 
clear: both; 
font-size: 0; 
height: 12px; 
line-height: 12px; 
} 
.fontcolorf1 { 
color: #999999; 
} 
.pm_main { 
border: 4px solid rgba(0, 0, 0, 0.1); 
left: 40%; 
position: fixed; 
top: 40%; 
width: 318px; 
z-index: 10001; 
} 
.pm_tit1 { 
background: url("images/dialog_blue.gif") repeat-x scroll 0 0 rgba(0, 0, 0, 0); 
color: #FFFFFF; 
height: 26px; 
line-height: 26px; 
padding: 0 1px; 
text-indent: 16px; 
width: 100%; 
cursor:move; 
} 
.pm_tit1 a { 
background: url("images/pm_bg.png") no-repeat scroll 0 -67px rgba(0, 0, 0, 0); 
cursor: pointer; 
height: 20px; 
margin-right: 10px; 
width: 20px; 
} 
.pm_tit1 a:hover { 
background-position: 0 -90px; 
} 
.pm_con1 { 
background: none repeat scroll 0 0 #CCCCCC; 
max-height: 150px; 
overflow-y: auto; 
padding: 0 1px 1px; 
width: 100%; 
} 
.pm_con2 { 
background: none repeat scroll 0 0 #FFFFFF; 
overflow: hidden; 
padding: 16px 0; 
width: 100%; 
} 
.pm_con2 p { 
margin-left: 80px; 
padding: 2px 0; 
text-align: left; 
} 
.pm_con2 p.fontcolorf3 { 
font-size: 14px; 
font-weight: bold; 
} 
.pm_btn1 a, .pm_btn1 a:link, .pm_btn1 a:visited, .pm_btn1 a:hover, .pm_btn1 a:active { 
background: url("images/pm_bg.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
display: inline-block; 
height: 28px; 
line-height: 28px; 
margin: 3px 40px 0 0; 
text-align: center; 
width: 53px; 
} 
.pm_btn1 a:hover { 
background-position: 0 -35px; 
color: #333333; 
text-decoration: none; 
} 
</style> 
</head> 
<body> 
<div class="pm_main hidden" id="divMaincontent"> 
<div class="pm_tit1"><span class="left">提示信息</span><a class="right" id="btnClose" href="javascript:void(0)"></a></div> 
<div class="pm_con1"> 
<div class="pm_con2"> 
<p id="alertTitle">提示</p> 
<p class="fontcolorf1" id="alertContent">今日秒杀已售罄</p> 
<div class="blackf1"></div> 
<div class="register_linef1"></div> 
<p class="pm_btn1"><a id="btnSure" href="javascript:void(0)">确认</a><a id="btnCancel" href="javascript:void(0)">取消</a></p> 
</div> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html>

效果图片:
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器 
images/里面的图片:

dialog_blue.gif:
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器 
pm_bg.png
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器 
文件包下载:
https://3water.com/jiaoben/112059.html

Javascript 相关文章推荐
Javascript 面向对象 命名空间
May 13 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
vue路由跳转传参数的方法
May 06 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
js单例模式的两种方案
Oct 22 #Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 #Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 #Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 #Javascript
用js的for循环获取radio选中的值
Oct 21 #Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 #Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 #Javascript
You might like
php实现的替换敏感字符串类实例
2014/09/22 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
python使用正则筛选信用卡
2019/01/27 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
涉外文秘个人求职的自我评价
2013/10/07 职场文书
软件工程师岗位职责
2013/11/16 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
推荐信怎么写
2014/05/09 职场文书
公司承诺函范文
2015/01/21 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python