简单漂亮的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 onmouseout 解决办法
Jul 17 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
vue实现节点增删改功能
Sep 26 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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的PSR规范中文版
2013/09/28 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
Express.JS使用详解
2014/07/17 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
Vue中props的详解
2019/05/16 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
python更新列表的方法
2015/07/28 Python
python使用knn实现特征向量分类
2018/12/26 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Python如何对齐字符串
2020/07/30 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
英雄儿女观后感
2015/06/09 职场文书
驻村工作简报
2015/07/20 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android