简单漂亮的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 相关文章推荐
js 自定义的联动下拉框
Feb 07 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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实现获取文章内容第一张图片的方法
2014/11/04 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
php获取linux命令结果的实例
2017/03/13 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
PHP的PDO连接讲解
2019/01/24 PHP
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
QML使用Python的函数过程解析
2019/09/26 Python
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
送给程序员的20个Java集合面试问题
2014/08/06 面试题
父亲的菜园教学反思
2014/02/13 职场文书
文员求职信
2014/07/15 职场文书
重点工程汇报材料
2014/08/27 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
python四种出行路线规划的实现
2021/06/23 Python
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers