简单漂亮的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 相关文章推荐
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
简单实现JS计算器功能
Dec 21 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
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 一元分词算法
2009/11/30 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
php实现头像上传预览功能
2017/04/27 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
Python urlopen()函数 示例分享
2014/06/12 Python
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
仓库管理专业个人自我评价范文
2013/11/11 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
nginx内存池源码解析
2021/11/20 Servers